함수 컴포넌트와 클래스 컴포넌트

 

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

리액트 컴포넌트의 라이프사이클은 크게 마운트, 업데이트, 언마운트로 나뉜다.

 

클래스 컴포넌트에서는 각 주기에 실행될 코드를 메소드를 통해 작성한다.

• 마운트 된 직후에 호출되는 componentDidMount(), 네트워크 요청을 보내기에 적절함
• 갱신이 일어난 직후에 호출되는 componentDidUpdate
• 컴포넌트가 마운트 해제되어 제거되기 직전에 호출되는 componentWillUnmount(), 타이머 제거, 네트워크 요청 취소, 생성된 구독 취소 등을 작성

이러한 방식은 재사용을 위한 코드 작성시에 코드의 양을 길어지게 했고, 버그 방지를 위해 개발자가 신경써야 할 부분이 너무 많았다.

 

함수 컴포넌트에서는 위 라이프사이클 메소드가 useEffect 안에 추상화되면서 커스텀 훅을 통한 재사용이 가능해졌고, 앞서 말한 문제가 해결되었다.

 

이 밖에도 함수 컴포넌트가 메모리 사용이 적다고 한다.