1. 라이프사이클이란?

일단 라이프 사이클에 관련되서 설명을 해볼까합니다.
저는 리액트에서 라이프사이클이라는 단어를 처음 들었었고 영어다 보니 우리나라에서 잘 쓰이지 않는 단어라고 생각됩니다. 직역하면 생애주기라고 해석되며 어떤 물품, 생명이 만들어졌을때부터 없어질 때까지의 과정을 의미합니다. 웹(리액트)에서도 라이프라이클이 있고, 크게 세단계로 구분합니다. 마운트 업데이트 언마운트 이렇게 세가지이며 마운트라는 의미자체가 생성이라는 의미입니다. 한글로 직역하면 생성 변경 사라짐 정도로 정리될거같은데 처음 저도 공부할때 mount라는 의미를 알지 못하고 공부해서 애먹었던 기억이 있습니다.

아래는 각 라이프사이클 단계별 메소드(class형 컴포넌트기준)입니다.

componentWillMount와 componentWillReceiveProps, componentWillUpdate는 모두 앞에 UNSAFE가 붙게 되어서 안정되지 않은것을 강조하고 있습니다. 사용하지않는것을 권장한다고 합니다.(UNSAFE 없이도 사용가능하나 안정되지 않는건 같습니다.)
이 블로그에서는 위 세개의 설명은 하지 않습니다. 그리고 아래 두개의 메서드의 설명 추가하겠습니다.
그리고 getDerivedStateFromProps와 getSnapshotBeforeUpdate가 새로 추가되었습니다.

2. 마운트(생성)

마운트라는 것은 처음으로 컴포넌트가 페이지에 나타나는것을 의미합니다. 마운트가 될때는 4가지의 메서드가 호출이 됩니다.(class형 컴포넌트 기준)

- render()

render는 라이프사이클 메서드중 유일하게 필수 메서드 입니다. this.props와 this.state에 접근이 가능하며 리액트요소를 반환합니다. 리액트 요소는 div나 리액트의 다른 컴포넌트가 될수도 있고 반환하기 싫다면 null이나 false를 반환하면됩니다. DOM정보에 접근하고 싶다면 여기서는 불가능합니다. return이 되고난 다음 실행되는 메서드인 componentDidMount에서 처리해야됩니다.
결과로 나올수 있는것들은

• react Element
• 배열과 Fregments
• False or null(rendering 하기 싫을때)
• String or Number (text노드로 렌더링)

- constructor(props){...}

컴포넌트 생성자 메서드로 컴포넌트가 마운트되는 과정에서 제일 처음으로 실행되는 메서드입니다. 이 메서드에서는 초기 state를 정할수 있습니다.

• 필수 라이프사이클 메서드가 아니므로 사용할 필요가 없다면 굳이 작성하지 않아도 됩니다.
• constructor을 사용한다면 super(props)을 반드시 호출하여 this.props를 정의해 줘야됩니다. 버그가 발생할수도 있습니다. (자세한 이유는 아직 모름)
• constructor 내부에서 비동기화 작업또는 setState등의 업데이트를 실행시키지 말아야됩니다. Mount되기전에 업데이트되는것은 바람직하지 않습니다.

- componentDidMount()

componentDidMount는 컴포넌트의 Rendering이 완료된 후에 실행되어야되는 작업들을 처리하면 되는 메서드입니다.

화면이 갱신되기전에 실행되는 메서드이기때문에 여기서 setState를 하더라도 화면은 1번의 갱신이 이루어지지만 렌더링은 두번이 이루어지기 때문에 필요한경우(동기화 작업)를 제외하고는 constructor에서 세팅하는게 좋습니다.

- getDerivedStateFromProps(nextProps,prevState)

첫번째인자로 부모컴포넌트에서 받은 객체이고, 두번째 인자는 렌더링전의 state객체입니다.

이 메서드의 return이 없을경우 warning이 발생하게 됩니다. return하는 데이터는 객체의 형태로 state로 반영됩니다.
추가적으로 state를 끌어오면 코드가 보기 힘들어지고 다른 대안이 좋은 대안이 많기 때문에 사용을 권장하지 않는 메서드입니다.

rendering 하기전에 props에 따라 state를 변경하고 싶을때 사용하는 메서드이며, 작업을 이 메서드에서 처리해서 최종 state를 객체의 형태로 return 하면 됩니다.

3. Update

component에서는 state와 props가 변경이 되면 Update가 진행이되며 리랜더링이 진행됩니다. Input이 달라지면서 component의 return값도 달라지기 때문입니다.
당연히 하위 컴포넌트도 다시 mount되게 됩니다.

- shouldComponentUpdate()

props와 state를 변경시에 리랜더링을 할지 결정하는 메서드입니다. 이 메서드는 return값을 true false로 결정해야됩니다. return값에 따라 업데이트의 여부가 결정이 됩니다.
이 메서드에서 this.props와 this.state 로 접근하고 nextProps와 nextState로 접근할수 있습니다.

이 메서드는 성능 최적화만을 위한 메서드입니다. 렌더링 방지 목적으로 사용하면 버그로 이어질수도 있습니다. 그래서 사용권장하지 않는 메서드중에 하나입니다.

- getSnapshotBeforeUpdate()

Dom변경 이전상태를 snapshot하여 return하고 Dom 변경이 완료된뒤 호출되는 componentDidUpdate()메서드에서 이 데이터를 참고하여 처리할때 사용합니다. 공식문서에서는 scrollBar를 예시로 들고있습니다.

return값은 componentDidUpdate의 세번째 인자로 들어가게되며 componentDidUpdate를 선언하지 않거나 return이 없는경우 warning이 발생합니다.

- componentDidUpdate(){...

componentDidMount와 마찬가지로 rendering이 일어난 직후에 호출이됩니다. 이 메서드는 Mount(최초렌더링)에서는 호출되지 않습니다. 만약 props가 변해서 통신이 필요하다면 네트워크요청등의 동기화작업들을 여기서 수행하면 좋다고합니다.

이 메서드에서 setState를 잘못호출한다면 무한 렌더링이 일어날수있습니다.
추가적으로 props는 state로 저장하지말고 props 그대로 사용을 권장합니다.
shouldComponentUpdate가 false를 반환한다면 이 메서드는 호출되지 않습니다.

-componentWillUnmount

componentWillUnmount는 마운트해제되어 제거되기 이전에 호출됩니다. 이 메서드에서 타이머제거, 네트워크 요청취소, redux구독등의 해제 등의 정리작업을 수행합니다.

여기서 setState를 호출해도 다시 Mount되지 않습니다.

추가적으로 에러컨트롤 관련 두가지 메서드가 더 있지만 여기서는 넘어가도록 하겠습니다. 혹시라도 궁금하신분들은 공홈에서 잘 사용하지 않는 메서드쪽을 확인하시면 될거같습니다.

더 궁금하시거나 잘못된것이보이시면 댓글로 알려주세요 ㅎㅎ
보고 자료들찾아서 수정하겠습니다.