📌 대표적인 차이
클래스형
class키워드 필요- Component로 상속을 받아야한다.
render()메소드가 반드시 필요하다.- state, lifeCycle 관련 기능사용이 가능하다.
- 함수형보다 메모리 자원을 더 사용한다.
- 임의 메소드를 정의할 수 있다.
함수형
- state, lifeCycle 관련 기능사용 불가능하다. [Hook을 통해 해결]
- 클래스형보다 메모지 자원을 덜 사용한다.
- 컴포넌트 선언이 편하다.
📌 state
클래스형
- constructor 안에서
this.state초기 값 설정 가능- counstructor 없이도 바로 state 초기값을 설정 가능
this.setState()를 통해 state값을 변경- 클래스형의 state는 객체형식
함수형
useState함수로 state를 사용한다.useState함수를 호출하면 배열이 반환되는데 첫 번째 원소는 현재 상태, 두번째 원소는 상태를 바꿔주는 함수이다.
📌 prop
클래스형
this.props로 통해 값을 불러올 수 있다.함수형
- props를 불러올 필요 없이 바로 호출 할 수 있다.
📌 이밴트 핸들링
클래스형
- 함수 선언시 화살표 함수로 바로 선언 가능하다.
- 요소에 적용할때
this.를 붙여줘야한다.함수형
const+ 함수 형태로 선언해야 한다.- 요소에 적용할때
this가 필요없다.
📌 Life Cycle
클래스형
클래스형 컴포넌트에서는 생명주기 메서드를 이용해서 컴포넌트의 상태 변화나 화면 갱신 등을 관리한다.
주요 생명주기 메서드로는
static getDerivedStateFromProps,componentDidMount,componentDidUpdate,componentWillUnmount등이 있다.
static getDerivedStateFromProps: 컴포넌트가 처음 렌더링 되기 전에도 호출 되고 그 이후에 리렌더링 되기 전에도 매번 실행된다. props로 받은 값을 state에다가 넣고 싶을때 사용 (거의 쓰지 않는 함수라고 한다.)componentDidMount: 컴포넌트가 마운트(렌더링 후 화면에 나타남)된 직후에 호출된다. 주로 네트워크 요청이나 외부 데이터 로딩 등 초기화 작업에 사용된다.componentDidUpdate: 컴포넌트가 업데이트(상태나 프롭스 변경 등)된 직후에 호출된다. 주로 이전 프롭스나 상태와 현재 프롭스나 상태를 비교해서 필요한 동작을 수행하는 데 사용된다.componentWillUnmount: 컴포넌트가 언마운트(화면에서 사라짐)되기 직전에 호출된다. 주로 이벤트 리스너 해제나 타이머 제거 등 정리 작업에 사용된다.함수형
반면에 함수형 컴포넌트에서는 이러한 생명주기 메서드를 직접 사용할 수 없지만,
useEffect훅을 사용해서 비슷한 기능을 구현할 수 있다.useEffect훅은 컴포넌트가 마운트, 업데이트, 언마운트될 때 실행될 콜백 함수를 지정할 수 있게 해준다. 이를 활용하여 생명주기 메서드와 비슷한 동작을 구현할 수 있다.
📌 함수형 컴포넌트를 선호하는 이유
요즘은 많은 개발자들이 클래스형 컴포넌트보다 함수형 컴포넌트+Hook을 사용한다.
클래스형 컴포넌트는 로직과 상태를 컴포넌트 내에서 구현하기 때문에 상대적으로 복잡한 UI 로직을 갖고 있는 반면,
함수형 컴포넌트는 state를 사용하지 않고 단순하게 데이터를 받아서(props) UI에 뿌려준다. Hook들을 필요한 곳에 사용하며 Logic의 재사용이 가능하다는 장점이 있어 함수형 컴포넌트+Hook을 주로 사용한다고 한다.
