Class component
이전에 Class Component와 state를 알아보면서,
React.Component의 setState()와 render() 메서드를 사용했습니다.
React.Component는 이외에도 Lifecycle method를 가집니다.
Lifecycle
컴포넌트 클래스에서 특별한 메서드를 선언하여,
컴포넌트의 특정 상황에 대해 일부 코드를 작동시킬 수 있습니다.
이러한 메서드를 'Lifecycle' 메서드라고 부릅니다.
Lifecycle은 크게 3가지로 나눌 수 있습니다.
Mounting, Updating, Unmounting
처음 DOM이 렌더링 될 때, 이것을 React에서 Mounting이라고 합니다.
Unmounting은 반대로 컴포넌트가 죽는것을 말합니다.
자주 사용하는 Lifecycle 메서드
componentDidMount
Mounting에서 처음 render가 실행된 후에 호출됩니다.
외부에서 데이터를 불러온다면, 네트워크 요청을 보내기 적합한 위치입니다.
데이터 구독을 설정하기 좋은 위치입니다.
componentDidUpdate
state가 변경되어 다시 렌더링 될 때, 그것을 update라고 합니다.
componentDidUpdate는 reder후 갱신된 직후에 호출됩니다.
componentWillUnmount
컴포넌트가 해제되어 제거되기 직전에 호출됩니다.
타이머 제거, 네트워크 요청 취소, 구독 해제 등 정리 작업을 동작시키는데 적합합니다.
function component
Hooks의 useEffect를 사용하면, function component에서 side effect를 만들 수 있습니다.
hooks의 useState와 useEffect에 대해 작성한 글이 있습니다.
react Hooks
web frontend developer