리액트에서 컴포넌트를 만드는 방법은 클래스로 만드는 방법과, 함수로 만드는 방법이 있다.
이 글에서 작성하고자 하는 라이프 사이클(생명주기)은 클래스로 만든 컴포넌트에서 사용하고 적용할 수 있다.
라이프 사이클(생명주기) <= 라이프 사이클로 줄여서 작성하겠습니다.
라이브 사이클은 기본적으로
1. willMount
2. didMount
3. didUpdate
4. willUnMount
이 순서대로 동작합니다.
Mount 단계
Mount는 개발자가 만든 컴포넌트가 브라우저에서 DOM에 삽입되면 발생한다.
Mount 단계에서의 rendering 순서는
constructor -> componentWillMount -> render -> componentDidMount 이와 같다.
constructor는 mount되기 전 발생하는데 클래스 컴포넌트에서 state를 constructor에서 관리하는 사이클
willMount는 사용하지 말라고 권장하는 사이클
componentDidMount는 DOM에 대한 접근이 필요한 모든 설정을 수행하고 필요한 데이터를 가져올 때, DOM이 있어야 하는 초기화 작업, 외부에서 데이터를 불러오는 네트워크 요청을 할 때 사용하기 좋은 사이클
Update 단계
Update는 컴포넌트가 업데이트 되거나 상태가 변경 될 때 마다 발생한다.
Update 단계에서의 rendering 순서는
getDrivedStateFromProps -> shouldComponentUpdate -> render -> getSnapshotBeforeUpdate -> componentDidUpdate 이와 같다.
shouldComponentUpdate는 컴포넌트가 업데이트 되거나 상태가 변경 될 때 마다 발생하는 라이프 사이클인데, 쉽게 말하자면 현재의 컴포넌트와 DOM에 그려진 컴포넌트가 다르다는것을 의미한다.
또한 라이프 사이클이 발생하는 시점은 render 되기 전으로 해당 라이프 사이클에서 다음 단계인 render를 발생시킬지 안시킬지 컨트롤 할 수 있다.
render 컨트롤은 해당 라이프 사이클에서 true, false로만 이루어진 boolean 값을 반환해주면 되는데, true를 반환하면 다음 단계의 라이프 사이클인 render를 발생시키고 false를 반환하면 반대로 render를 발생시키지 않는다.
shouldComponentUpdate 라이프 사이클로 컴포넌트 최적화를 수행할 수 있는데 이 방법 말고도 클래스 컴포넌트에서 PureComponent를 extends하거나 함수 컴포넌트에서 memo를 사용하면 된다. (모두 얕은 비교를 한다.)
unMount 단계
willUnMount는 컴포넌트가 DOM에서 사라질 때 발생한다.
