함수형 컴포넌트 vs 클래스형 컴포넌트

안녕하세요 JJU_developer입니다.

 

이번시간에는 함수형 컴포넌트와 클래스형 컴포넌트 그 둘의 

차이점에 대해서 알아보도록 하겠습니다~~!!!!

 

React에는 컴포넌트를 선언하는 방식 

1. 클래스형 컴포넌트(class component)
2. 함수형 컴포넌트(function component)

React 공식문서에서는 함수형 컴포넌트와 훅(hook)을 사용할 것을 권장하고 있습니다.

 

👉  클래스형 컴포넌트
1. class 키워드가 반드시 필요합니다.
2. Component로 상속받아야 합니다.
3. render() 메소드가 반드시 필요합니다.
4. state, Life Cycle 사용 가능합니다.
5. 메모리 자원이 함수형 컴포넌트에 비해 많이 사용합니다.
6. 컴포넌트가 복잡하며, 로직의 재사용이 힘듦니다

 

👉  함수형 컴포넌트
1. 클래스형 컴포넌트에 비해 선언 방식이  매우 간단합니다.

2. 메모리 자원이 클래스 컴포넌트에 비해 덜 사용합니다.
3. 재사용성과 확장성이 높음(React 16.8 버전 이후 'hook' 이후)

4. state, lifeCycle 관련 기능사용 불가능 (Hook을 통해 해결 가능합니다.)

 

 

차이점 1. state

클래스형(class component)

1. constructor 안에서 this.state 초기 값 설정 가능합니다.
2. constructor 없이 바로 state 초기값을 설정할 수 있습니다.
3. 클래스형 컴포넌트의 state는 객체 형식입니다.
4. this.setState 함수로 state의 값을 변경할 수 있습니다.

 

함수형(function component)

1. 함수형 컴포넌트에서는 useState 함수로 state를 사용합니다.
2. useState 함수를 호출하면 배열이 반환되는데 첫 번째 원소는 현재 상태
3. 두 번째 원소는 상태를 바꾸어 주는 함수입니다.

 

 

차이점 2. props

클래스형(class component)

1. this.props로 통해 값을 불러올 수 있습니다.

 

함수형(function component)

1. props를 불러올 필요 없이 바로 호출 가능합니다.

 

 

차이점 3. event

클래스형(class component)

1. 함수 선언시 화살표 함수로 바로 선언 가능합니다.
2. 요소에 적용할때 this.를 붙여줘야 합니다..

 

함수형(function component)

1. const와 함수 형태로 선언해야합니다.
2. 요소에 적용할 때 this가 필요 없습니다.

 

[정리]

함수형 컴포넌트는 클래스형 컴포넌트와 달리 state가 없고 생명주기 함수를 사용할 수 없습니다.

상위 컴포넌트에서 props와 context를 파라미터로 전달받아 사용하고 render() 함수가 없으므로

return만 사용해 화면을 그려줍니다.

 

hook 사용하기

함수형 컴포넌트에서 클래스형 컴포넌트와 같이 state와 생명주기 함수와 같은 기능을 사용하기 위해 

hook을 이용합니다.. 대표적인 hook 함수에는 usestate()와 useEffect()가 있습니다.

 

 

 

 

오늘도 수고하셨습니다~!!