[ React ] 라이프사이클

모든 리액트 컴포넌트에는 라이프사이클(수명 주기)이 존재 합니다 컨포넌트의 수명은 페이지에 렌더링 되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝납니다.
라이프 사이클을 이해하고 사용한다면 컴포넌트를 처음으로 렌더링할 때 어떤 작업을 수행하거나 컴포넌트를 업데이트 하기 전후로 어떤 작업을 처리해야 할 수도 있고 또 불필요한 업데이트를 방지할 수 있습니다

라이프사이클 메서드

라이프사이클 메서드는 총 9가지 입니다.

• will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 실행되는 메서드 이고
• Did 접두사가 붙은 메서드는 어떤 작업을 작동한 후에 실행되는 메서드 입니다
  이 메서드들은 컴포넌트 클래스에서 덮어 써 선언함으로써 사용할 수 있습니다.

라이프사이클은 총 3가지 카테고리로 나뉩니다

• 마운트
• 업데이트
• 언마운트

마운트

DOM이 생성되고 웹 브라우저상에 나타나는 것을 마운트(Mount)라고 하고 이때 호출하는 메서드는

1. 컴포넌트 만들기

2. constructor

3. getDerivedStateFromProps

4. render

5. componentDidMount

순서로 작동합니다

마운트 메서드 설명

• constructor : 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드 입니다.
• getDerivedStateFromProps : props에 있는 값을 state에 넣을 때 사용하는 메서드 입니다
• render : 우리가 준비한 UI를 렌더링하는 메서드 입니다
• componentDidMount : 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드입니다.

업데이트

컴포넌트는 다음과 같은 총 4가지 경우에 업데이트합니다.

• props가 바뀔때
• state가 바뀔때
• 부모 컴포넌트가 리렌더링될 때
• this.forceUpdate로 강제로 렌더링을 트리거할 때

업데이트할 때 호출하는 메서드 순서

1. 업데이트 발생시키는 요인
   1.1 props 변경. state 변경, 부모 컴포넌트 리렌더링
2. getDerivedStateFromProps
3. shouldComponentUpdate
   3.1 true 반환 시 render 호출, false 반환 시 여기서 작업 취소
4. render
5. getSnapshotBeforeUpdate
   5.1 웹 브라우저상의 실제 DOM 변화
6. componentDidUpdate

컴포넌트는 다양한 이유로 업데이트 될수 있습니다.

• 부모 컴포넌트에서 넘겨주는 props가 바뀔때
• 컴포넌트가 가지고 있는 state가 setState를 통해 변경(업데이트) 될때
• 부모 컴포넌트가 리렌더링 될때 (자신의 props, state가 변경되지 않아도 부모컴포넌트가 리렌더링되면 자식 컴포넌트 또한 리렌더링됩니다)

업데이트 메서드 설명

• getDerivedStateFromProps : 마운트 과정에서도 호출되며, 업데이트가 시작하기 전에도 호출됩니다. props의 변화의 따라 state 값에도 변화를 주고 싶을때 사용합니다
• shouldComponentUpdate : 컴포넌트가 리렌더링을 해야 할지 말아야 할지를 정하는 매서드 입니다,. 이 메서드 에서는 true 혹은 false를 반환 해야하며, true를 반환 하면 다음 라이프 사이클 메서드를 계속 실행하고 false를 반환하면 작업을 중지하고 컴포넌트가 리렌더링 되지 않습니다.
  만약 특정 함수에서 this.forceUpdate() 함수를 호출 한다면 이과정을 생략하고 바로 render 함수를 호출합니다
• render : 컴포넌트를 리렌더링 합니다
• getSnapshotBeforeUpdate : 컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출하는 메서드 입니다.
• componentDidUpdate : 컴포넌트의 업데이트 작업이 끝난 후 호출하는 메서드 입니다.

언마운트

마운트의 반대과정 이며 컴포넌트를 DOM에서 제거하는 것을 언마운트(unmount)라고 합니다.

언마운트할 때 호출하는 메서드

1. 언마운트하기
2. componentWillUnmount

언마운트 메서드 설명

• componentWillUnmount : 컴포넌트가 웹 브라우저상에서 사라지기 전에 호출하는 메서드 입니다.