[React] 컴포넌트 생명주기 (Component Life Cycle)

 

React 를 배울 때 가장 어려웠던 것은 컴포넌트의 생명주기(Component Life Cycle) 를 이해하는 것이었다. 특히나 업데이트를 하다가 무한 렌더링에 빠진 적이 한두번이 아니었기 때문이다.

 

---

Component Life Cycle

---

(출처: https://ko.reactjs.org/docs/react-component.html)

 

1. Mount

마운트(Mount) 는 DOM 객체가 생성되고 브라우저에 나타나는 것을 의미한다. 이때 메소드 호출 순서는 아래와 같다. 

 

1) constructor(props)

컴포넌트 클래스의 생성자 함수로 컴포넌트를 만들 때 처음으로 호출되는 함수이다. constructor() 내에서는 setState() 를 호출하면 안된다. this.state 를 이용하여 초기값을 할당해야 한다.

 

2) static getDerivedStateFromProps(props, state)

props 와 state 값을 동기화할 때 사용하는 함수로 v16.3  이후에 만들어졌다.

 

3) render()

컴포넌트의 기능과 모양새를 정의하는 함수로 리액트 요소를 반환한다.

 

4) componentDidMount()

컴포넌트를 생성하고 첫 렌더링이 끝났을 때 호출되는 함수이다. 

 

 

2. Update 

컴포넌트가 업데이트되는 경우는 props 값 변경, state 값 변경, 부모 컴포넌트가 리렌더링될 때, this.forceUpdate 를 사용하여 강제로 리렌더링할 때 로, 메소드 호출 순서는 아래와 같다.

 

1) static getDerivedStateFromProps(props, state)

props 와 state 값을 동기화할 때 사용하는 함수로 v16.3  이후에 만들어졌다.

 

2) shouldComponentUpdate(nextProps, nextState)

컴포넌트를 리렌더링 할지 말지를 결정하는 함수이다. true 를 반환하면 아래 함수들을 호출하여 업데이트에 따른 리렌더링을 진행하고, false 를 반환하면 리렌더링 하지 않고 아래 함수도 실행되지 않는다. 

 

3) render()

새로운 값을 사용하여 View 를 리렌더링 한다.

 

4) getSnapshotBeforeUpdate(prevProps, prevState)

가장 마지막으로 렌더링된 결과가 DOM 에 반영되었을 때 호출되는 함수이다.

 

5) componentDidUpdate(prevProps, prevState, snapshot)

컴포넌트 업데이트 작업이 끝난, 리렌더링 후에 호출되는 함수이다. componentDidUpdate() 내에서 setState() 를 즉시 호출할 수도 있지만 조건문으로 감싸지 않으면 무한 렌더링에 빠질 수 있기 때문에 주의해서 사용해야 한다.

 

 

3. Unmount

언마운트(Unmount) 란 컴포넌트가 DOM 에서 제거되는 것을 말한다. 

 

1) componentWillUnmount()

컴포넌트가 제거되기 직전에 호출되는 함수이다. componentWillUnmount() 내에서 setState() 를 호출하면 안된다.

 

 

4. Errour Boundary

아래 함수들은 자식 컴포넌트를 렌더링하거나, 자식 컴포넌트가 생명주기 함수를 호출하거나, 자식 컴포넌트가 생성자 함수를 호출하는 과정에서 오류가 발생했을 때 호출된다.

 

1) static getDerivedStateFromError(error)

자식 컴포넌트에서 오류가 발생했을 때 호출되는 함수이다. 매개변수로 오류를 전달받고, 갱신된 state 값을 반드시 반환해야 한다.

 

2) componentDidCatch(error, info)

컴포넌트가 렌더링 되는 도중 런타임 에러가 발생하면 호출되는 콜백함수다.