[React] 라이프사이클(Lifecycle)에 대해

1. 라이프사이클(Lifecycle) 이란?

리액트는 컴포넌트 기반의 View를 중심으로 한 라이브러리이다.

그래서 각각의 컴포넌트에는 라이프사이클(=수명 주기)가 존재한다.

컴포넌트는 생성(mounting) ▶ 업데이트(updating) ▶ 제거(unmounting)의 생명주기를 갖는다.

위 이미지는 라이프사이클(Lifecycle)을 나타낸 것이다.

라이프사이클(Lifecycle)이 업데이트될 때 아래 링크를 참고하여 확인해보는 것이 좋을 것 같다.

React Lifecycle Methods diagram

---

2. 라이프사이클(Lifecycle)의 분류

라이프사이클(Lifecycle)은 크게 생성(Mount)될 때, 업데이트(Update)할 때, 제거(Unmount)할 때 3가지로 나눌 수 있다.

 

1️⃣ 마운트 (Mount)

: DOM이 생성되고 웹 브라우저 상에서 나타나는 것

2️⃣ 업데이트 (Update)

: 업데이트는 아래와 같은 4가지 상황에서 발생한다.

1) props가 바뀔 때 2) state가 바뀔 때

3) 부모 컴포넌트가 리렌더링될 때 4) this.forceUpdate로 강제 렌더링을 트리거할 때

3️⃣ 언마운트 (Unmount)

: DOM에서 제거되는 것

---

3. 라이프사이클(Lifecycle) 메서드

1️⃣ constructor

- 컴포넌트 생성자 메서드

- 컴포넌트가 생성되면 가장 먼저 실행되는 메서드

- 초기 state를 정할 수 있다.

const ex = () => {
    const [count, setCount] = useState(0);
}

 

2️⃣ getDerivedStateFromProps

- props로 받아온 값을 state에 넣을 때 사용

Hook 자주 묻는 질문 – React

 

3️⃣ shouldComponentUpdate

- props나 state를 변경했을 때, 리렌더링을 할지 말지 결정하는 메서드

- 반드시 boolean 반환해야 한다.

- React.memo와 유사하다.

const ex = React.memo(() => {
    ...
  },
  (prev, next) => {
    return next.value === prev.value;
  }
)

 

4️⃣ render

- 컴포넌트를 렌더링하는 메서드

- 함수 컴포넌트에서는 render()를 쓰지 않고 컴포넌트를 렌더링한다.

const ex = () => {
  return <p>Hi</p>;
}

 

5️⃣ getSnapshotBeforeUpdate

- render에서 만들어진 결과가 브라우저에 반영되기 직전에 호출된다.

- 함수 컴포넌트에서는 아직 이 기능을 대체할만한 hook이 없다.

 

6️⃣ componentDidMount

- 컴포넌트의 첫번째 렌더링이 마치면 호출된다.

- 이 메서드가 호출되는 시점에는 화면에 컴포넌트가 이미 나타난 상태이다.

- useEffect의 [] 의존성 배열을 비워야 똑같은 메서드 구현이 가능하다.

const ex = () => {
  useEffect(() => {
    ...
  }, []);
}

 

7️⃣ componentDidUpdate

- 리렌더링이 완료한 후 실행

- 의존성 배열이 변할 때만 useEffect가 실행되는 것과 같다.

useEffect(() => {
  setCount((prev) => prev + 1);
}, [count]);

 

8️⃣ componentWillUnmount

- 컴포넌트가 화면에서 사라지기 직전에 호출된다.

- 함수 컴포넌트에서는 useEffect cleanup 함수를 통해 해당 메서드를 구현할 수 있다.

useEffect(() => {
  return () => {
    ...
  }
}, []);

 

9️⃣ componentDidCatch

- 맨 위 사진에는 존재하진 않지만 componentDidCatch 메서드가 존재한다.

- 컴포넌트 렌더링 도중 에러가 발생했을 때 에플리케이션이 멈추지 않고 오류 UI를 보이게 해준다.

- 함수 컴포넌트에서는 아직 이 기능을 대체할만한 hook이 없지만 곧 추가할 예정에 있다고 한다.

Hook 자주 묻는 질문 – React