[React] 리액트 생명주기 (React Lifecycle)

원티드에서 진행하는 4월 프리온보딩 프론트엔드 챌린지 내용이 React 랜더링, 최적화에 관한 내용이라 들어보고 싶어서 신청하였다. 사전과제로 아래와 같은 4가지 질문이 있어서 공부하면서 내용을 정리해보았다.

 

 

React는 컴포넌트 기반의 View를 중심으로 한 라이브러리이기 때문에 각각의 컴포넌트에는 생명주기가 존재하고 컴포넌트의 수명은 보통 페이지에서 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝이 난다.

 

 

클래스 컴포넌트에서는 라이프사이클이 컴포넌트 중심에 맞춰져 있다.

컴포넌트가 마운트되려 할 때, 마운트 되고나서, 업데이트 되었을 때, 언마운트 될때 실행된다.

 

모든 컴포넌트는 여러 종류의 "생명주기 메서드"를 가지며, 이 메서드를 오버라이딩하여 특정 시점에 코드가 실행되도록 설정할 수 있다.

 

 

 

Mount 

아래 메서드들은 컴포넌트의 인스턴스가 생성되어 DOM 상에 삽입될 때 순서대로 호출된다.

 

• constructor()  :  컴포넌트의 생성자 메서드. 컴포넌트가 만들어지면 가장 먼저 실행되는 메서드이다.
• static getDerivedStateFromProps()  :  props로 받아온 것을 state에 넣어주고 싶을 때 사용한다.
• render()  :  컴포넌트를 렌더링하는 메서드이다.
• componentDidMount()  :  컴포넌트의 첫번째 렌더링이 마치고 나면 호출되는 메서드이다.

 

 

 

 

Update 

props 또는 state가 변경되면 갱신이 발생한다. 아래 메서드들은 컴포넌트가 다시 렌더링될 때 순서대로 호출된다.

 

• static getDerivedStateFromProps()  :  props나 state가 바뀌었을때도 이 메서드가 호출된다.
• shouldComponentUpdate()  :  컴포넌트가 리렌더링 할지 말지를 결정하는 메서드이다.
• render() 
• getSnapshotBeforeUpdate()  :  컴포넌트에 변화가 일어나기 직전의 DOM 상태를 가져와서 특정 값을 반환하면 그 다음 발생하게 되는 componentDidUpdate 함수에서 받아와서 사용을 할 수 있다.
• componentDidUpdate()  :  리렌더링이 마치고, 화면에 우리가 원하는 변화가 모두 반영되고 난 뒤 호출되는 메서드이다.

 

 

 

Unmount

아래 메서드는 컴포넌트가 DOM 상에서 제거될 때에 호출된다.

 

• componentWillUnmount()  :  컴포넌트가 화면에서 사라지기 직전에 호출된다.

 

 

 

Error 

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

 

• static getDerivedStateFromError() 
• componentDidCatch()

 

 

 

 

 

 

 

 

반면, 함수 컴포넌트에서는 특정 데이터에 대해서 라이프 사이클이 진행된다.

데이터의 개수에 따라 useEffect를 여러 번 사용하게 된다.

useEffect(() => {
    console.log('x 바뀜');
}, [x])

위 useEffect는 컴포넌트가 첫 렌더링될 때 한번 실행되고, 그 다음부터 x가 변경될 때마다 실행된다.

→  componentDidMount와 componentDidUpdate가 합쳐진 것과 같다.

 

useEffect문 안에 return으로 함수를 제공하면 componentWillUnmount의 역할도 할 수 있다.

useEffect(() => {
  console.log('x 바뀜');
  return () => {
    console.log('x가 바뀔 예정');
  };
}, [x]);

 

useEffect 두번째 인자에 빈배열을 넣으면 컴포넌트가 첫 렌더링될 때 한번만 실행한다.

단, 컴포넌트가 언마운트될 때 return의 함수가 실행된다.

useEffect(() => {
  console.log('마운트');
  return () => {
    console.log('언마운트');
  };
}, []);

 

useEffect 두번째 인자에 아무것도 넣지 않으면 데이터와 관련없이 컴포넌트가 리렌더링될 때마다 실행한다.

useEffect(() => {
    console.log('리렌더링될 때마다 실행');
});

 

데이터가 업데이트됬을 때만 실행하고 싶다면 (componentDidMount는 무시하고 componentDidUpdate역할만 하고 싶다면)

const mountRef = useRef(false);

useEffect(() => {
    if (mountRef.current) {
        console.log('updated!');
    } else {
        mountRef.current = true;
    }
});

 

 

 

 

 

 

 

참고 자료

🔗 [reactjs.org]  React.Component

🔗 [react.dev]  Component 

🔗 [벨로퍼트와 함께하는 모던 리액트]  25. LifeCycle Method

🔗 [zerocho]  React의 생명 주기(Life Cycle)

🔗 [zerocho]  React Hooks! useEffect편(React 17버전)

🔗 react lifecycle methods diagram