리엑트 라이프사이클
https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
리엑트는 다음과 같은 라이프 사이클을 갖고 있다.
이 중 shouldComponentUpdate, getDerivedStateFromProps, getSnapshotBeforeUpdate 와 같은 사이클은 특별한 시나리오(경우)에만 사용하게 됨으로, 이 후 필요한 경우 공부(정리) 하도록 한다.
그렇다면 각각의 사이클이 갖고 있는 역할 or 기능은 무엇일까?
Constructor
constructor는 생성자 메서드로 컴포넌트가 만들어질 때 가장 먼저 실행되는 메소드이다.
class component를 만들 때, state를 정의 시, 이곳에 위치하게 된다.
주의점은 state가 변하는(data loading 등) 로직은 constructor 혹은 componentDidMount에 위치 할 수 있지만, componentDidMount에 위치하도록 한다.
공식 문서와 개발자 커뮤니티 등이 권고하는 방향이며, constructor는 one time setup 이기 때문에 state변화 시 불려지는 render의 전 과정인 componentDidMount에 위치하는 것이 올바르다.
Render
컴포넌트를 랜더링 하는 메서드 이다. 가장 많이 보고, 익숙할 수 밖에 없다. 화면에 컨텐츠를 보여지게 한다. 당연하게 이 메소드는 optional 하지 않다!
또한 JSX를 return 한다.
ComponentDidMount
컴포넌트가 랜더링을 마치고 나면 호출되는 메서드이다. 즉, 이 메서드가 불려질 때는 화면에는 이미 컴포넌트가 출력되있다. update를 기다리며 DOM을 사용해야하는 라이브러리, 해당 컴포넌트가 필요로 하는 데이터를 요청하기 위한 axios, fetch 혹은 class component의 state 의 데이터를 직접 변경하거나 읽는 경우의 작업을 진행한다.
ComponentDidUpdate
리랜더링을 마치고 나면 호출되는 메서드, 이 메서드와 componentDidMount 사이에 Render가 호출된다.
ComponentWillUnmount
컴포넌트가 화면에서 사라지기 직전에 호출.
DOM에서 직접 등록했던 이벤트 제거, 외부 라이브러리의 기능 중 dispose 와 같은 기능이 있다면 이곳에서 호출한다.
정리
컴포넌트의 구성에는 class component와 functional component가 있다. 물론 추세는 2019년 v16.8부터 지원된 React의 훅(Hook) 덕분에 공식문서에서 functional component 권고하고 있지만, 어느 개발자가 그렇듯 class component를 functional component로 이식하기 위해서 혹은 특정 기업이 아직 class component를 선호 할 경우를 대비하여 알아두는것은 올바르다.
