React 라이프 사이클

React LifeCycle

React lifecycle 공식문서 이미지이다.

리액트에서 웹 페이지의 생명주기가 어떤 방식으로 작동하는지 알 수 있다.

 

 

componentDidmount

component가 mount ( 트리에 삽입 됐을 때) 되는 시점이다.

useEffect가 실행되는 위치이며, subscription set up 을 하기 좋은 위치이다. 

보통 필요한 데이터를 서버에 요청하는 단계이다.  

 

componentDidUpdate

업데이트 후 실행되지만 첫 렌더링에는 발생하지 않는다. ?

컴포넌트가 업데이트 됐을 때 network request 수행할 수 있는 좋은 위치이다.

위 그림과 같이 useEffect에 dependency를 걸어서 해당 dependency가 업데이트 될 때마다 특정 작업(이전 props와 현재 props를 비교하는 작업 등)을 수행할 수 있다.

 

componentWillUnmount

컴포넌트가 unmount 되기 전에 실행된다. 

useEffect에 return () => {} 을 통해 unmount 전에 특정 작업을 수행할 수 있다.

만약 timeout 등이 설정되어 있다면 페이지를 이탈하기 전에 해당 timeout을 종료 시키는 등의 작업을 수행할 수 있다.

이와 같은 unsubscribe를 하지 않는다면 메모리 누수가 일어나는 것으로 알고 있다.