React LifeCycle 생명주기 (최대한 쉽게 설명)

기본적으로 Component를 사용하기 시작할 때 Mount (장착시킨다) 한다.

Mount가 완료되면, Props, setState, forceUpdate 등의 값을 입력받아 다시 렌더링 한다.

렌더링을 마치면, React DOM을 재반영시킨다. (componentDidUpdate)

Component 사용을 마쳐서 제거할 때, componentWillUnmount (장착을 해제시킬건데, 작동할 함수를 구동할께) 를 구동시킨다.

componentWillUnmount 는 주로... 계속 유지할 필요가 없는 State를 해제시키면서 component를 Unmount 하는 게 맞기 때문에 대략.. 네트워크 연결상태 해제 같은 것들을 한다고 보면 적당할 것 같다. 예를 들면, 로그인 상태 값을 해제시키는 것도 같은 값일 것 같다.

네이버 메인 페이지에서 로그인 이후에, 로그아웃을 한다고 보자. 그러면, 로그아웃 버튼을 클릭했을 때, 로그아웃에 관련된 Component를 없애야 한다. 이 때 componentWillUnmount 를 사용하면서, 처리해야할 api 값들을 전부 다 호출해야 할 것이다. 이 때 쓴다고 보면 된다.

 

간단버젼

 

복잡 버전

출처 : projects.wojtekmaj.pl/react-lifecycle-methods-diagram/