[React] Class형 컴포넌트의 라이프사이클

https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

 

 

모든 컴포넌트는 라이프사이클(= 생명주기) method를 가지고 있다. 이를 활용해 특정 시점에 코드가 실행되도록 작성할 수 있다.

라이프사이클은 크게 마운트(mount), 업데이트(update), 언마운트(unmount) 3가지로 나뉘며 각각 하위에 method들을 지닌다.

 

마운트

컴포넌트의 인스턴스가 생성되어 DOM에 삽입되는 시점을 Mount(마운트)라고 한다.

아래의 메서드들이 순서대로 호출된다.

componentWillMount()는 리액트 공식문서에서 더 이상 권장하지 않는다. (2018년 기준)

 

- constructor(props)

React 컴포넌트의 생성자로, 마운트되기 전에 호출된다. 가장 먼저 실행되는 메서드이다.

super(props)를 우선적으로 호출해야 한다. 그렇지 않으면 this.props가 정상적으로 정의되지 않기 때문이다.

메서드를 바인딩하거나 this.state를 지정하여 초기값을 선언할 수 있다.

constructor(props){
  super(props);
  this.state = { message: 'hi' } // 로컬 state
  this.handleClick.bind(this); // event 처리 method 바인딩
}

 

- static getDerivedStateFromProps()

props로 받아온 값을 state에 넣으려고 할 때 사용된다.

리액트에서 권장되지는 않으며 componentDidMount를 활용하도록 제안한다.

 

- render()

컴포넌트를 렌더링하는 메서드이다.

 

- componentDidMount()

시점은 DOM에 렌더링된 직후이다. 컴포넌트가 이미 화면에 노출되어 있다.

tree에 삽입된 직후이기에 DOM 노드가 있어야 하는 초기화 작업들은 해당 메서드에서 진행하면 된다. 예를 들면 외부 데이터를 불러오는 data fetch(네트워크 요청) 또는 DOM을 조작하는 작업을 한다.

setState가 호출될 경우, 추가적인 렌더링이 발생하지만 화면을 갱신하기 전에 이루어진다. render()가 2번 호출되어도 사용자가 그 중간 과정을 볼 수는 없다.

 

---

업데이트

props나 state가 변경될 때 업데이트된다. 이에 따라 컴포넌트가 렌더링 되면서 아래의 method들이 순서대로 호출된다.

cf. 리액트 공식문서에서는 componentWillUpdate, componentWillReceiveProps가 권장되지 않고 있다.

 

- static getDerivedStateFromProps()

mount와 마찬가지로 update 시점에도 실행된다.

즉 렌더링이 될 때마다 실행되는 메서드이다.

하지만 React에서는 이를 사용하기 보다는 componentDidUpdate를 활용하는 것을 권장한다.

 

- shouldComponentUpdate()

props 또는 state가 새로운 값으로 갱신되어서 렌더링 발생하기 직전에 호출된다.

컴포넌트가 리렌더링을 할지 말지에 대해 결정한다. 아무것도 입력하지 않으면 기본값은 true이지만, 반환값이 false로 주게 되면 render(), componentWillUpdate(), componentDidUpdate()가 실행되지 않는다.

성능 최적화를 위한 메서드이며, 업데이트시 렌더링을 방지하기 위함이다.

shouldComponentUpdate(nextProps, nextState) {
  return nextState.age !== 20;
}

 

- render()

컴포넌트를 렌더링하는 메서드이다.

 

- getSnapshotBeforeUpdate()

렌더링 된 결과가 DOM에 반영되기 전에 호출된다.

컴포넌트가 DOM으로부터 스크롤 위치 등과 같은 정보를 '변경되기 전'에 얻을 수 있다. 이를 통해 componentDidUpdate에 인자로 전달 가능하다.

예를 들면 채팅창의 스크롤 위치를 처리하는 작업이 있겠다.

 

- componentDidUpdate(prevProps, prevState, snapShot)

시점은 업데이트가 일어나 리렌더링이 된 후다. 최초 렌더링에는 실행되지 않는다.

props 변화에 대응한 부수 효과를 발생시킬 수 있다.

또한 3번째 인자로부터 getSnapshotBeforeUpdate의 반환값을 얻을 수 있다.

컴포넌트 갱신시, DOM 조작에 용이하다. 예를 들면 이전과 현재의 props를 비교하여 바뀌었다면 네트워크 요청을 할 수 있다.

componentDidUpdate(prevProps){
  if (this.props.name !== prevProps.name) this.fetchData(this.props.name);
}

setState 호출 시 조건문으로 감싸지 않으면 무한 반복이 일어날 수 있다는 점 주의해야 한다.

또한 shouldComponentUpdate가 false를 반환하면 해당 메서드는 실행되지 않는다.

 

---

마운트 해제

Unmount는 컴포넌트가 화면에서 사라지는 시점을 말한다.

메서드는 1개만 있다.

- componentWillUnmount()

시점은 컴포넌트가 마운트 해제되어 제거되기 '직전'이다. 

타이머 제거, 네트워크 요청 취소 등의 상황에서 사용할 수 있다.

컴포넌트를 다시 렌더링 하지는 않기에 setState를 호출하면 안 된다.

 

 

 

 

https://ko.legacy.reactjs.org/docs/state-and-lifecycle.html

State and Lifecycle – React

https://ko.legacy.reactjs.org/docs/react-component.html

React.Component – React