React 라이프사이클

개요

https://www.zerocho.com/category/React/post/579b5ec26958781500ed9955

https://www.zerocho.com/category/React/post/5f9a7c8807be1d0004347311

https://www.zerocho.com/category/React/post/5f9a6ef507be1d0004347305

라이프사이클 포스트를 읽고 제가 이해한 방식으로 정리한 글입니다.

React 컴포넌트 라이프사이클

생애주기 또는 라이프사이클로 많이 표현되며 React의 모든 컴포넌트가 실행되거나 업데이트, 제거될 때 특정한 이벤트들이 발생하게 된다.

Class 컴포넌트 라이프사이클

 

Mount

컴포넌트가 처음 실행될 때 발생하는 이벤트들

1. context, defaultProps, state를 저장한다
2. componentWillMount
   • 아직 Mount 되지않고 실행중인 상황이기 때문에 앞선 context, defaultProps, state 변경 불가
   • DOM에 접근이 불가
3. Render
   • 컴포넌트를 DOM에 부착
4. componentDidMount
   • DOM에 접근 가능
   • AJAX, setTimeout 등 비동기 작업을 수행한다

 

Props Update

props가 업데이트될 때의 발생하는 이벤트들

1. componentWillReceiveProps
   • 업데이트 발생을 확인 후 실행됨
2. shouldComponentUpdate
   • Render하기 전으로 false가 return되면 Render가 취소된다.
   • 성능 최적화를 진행하는 단계로 불필요한 update를 취소함
3. componentWillUpdate
   • 아직 업데이트 하기 전이므로 state를 변경해선 안된다. shouldComponentUpdate가 다시 발생할 수 있음
4. Render
   • 컴포넌트를 DOM에 부착
5. componentDidUpdate

 

State Update

setState같이 state가 업데이트됐을 때 발생하는 이벤트들

props와 유사하지만 componentWillReceiveProps 과정은 발생하지 않는다.

첫 번째 인자로 현재 state값을 받고, 두 번째 인자로 업데이트될 state값을 받는다

1. shouldComponentUpdate
2. componentWillUpdate
3. render
4. componentDidUpdate

 

Unmount

컴포넌트가 제거될 때 발생하는 이벤트들이다.

다만 제거된 컴포넌트에서 이벤트를 만들어낼 수 없으니 componentWillMount를 통해 이벤트 리스너를 제거하는 작업이 이루어지게 된다.

 

Error

에러 발생시를 대비하여 componentDidCatch가 있다 + React v16 버전에서 추가

 

getDerivedStateFromProps

props가 바뀌면 state도 같이 변경될 수 있도록 하는 이벤트이다.

 

함수형 컴포넌트 라이프사이클

함수형 컴포넌트와 클래스 컴포넌트간 라이프사이클 차이가 있다.

 

클래스 컴포넌트의 라이프사이클은 컴포넌트에 중심이 맞춰져있고, 클래스형 컴포넌트에서 삭제된 이벤트들이 존재한다.

반면 함수형 컴포넌트의 겨우에는 특정 데이터에 따라 라이프사이클이 진행되고, 라이프 사이클을 발생하는 데이터는 여러 개가 있을 수 있다.

 

대표적으로 useEffect 훅이 있으며 데이터의 개수에 따라 여러 번 사용하게 된다.

const [count, setCount] = useState(0)

useEffect(() => {
    // 이 효과는 컴포넌트가 렌더링될 때와 count 상태가 변경될 때 실행됩니다.
    document.title = `Count: ${count}`;

    // 컴포넌트가 언마운트될 때 정리 함수를 반환할 수 있습니다.
    return () => {
      document.title = 'My App'; // 컴포넌트가 언마운트될 때 타이틀을 원래대로 복구
    };
  }, [count]); // 이 효과는 count 상태가 변경될 때만 실행

해당 코드에서 count라는 state가 변경될 때마다 라이프 사이클을 실행할 수 있으며 해당 예제 코드에서는 컴포넌트가 처음 렌더링 될때와 count 값이 변경될 떄마다 실행된다.

 

클래스형 컴포넌트의 componentDidMount + componentDidUpdate가 합쳐져 진행된다

 

동시에 return을 통해 componentWillMount의 역할도 수행하게 된다

 

데이터가 여러 개라면 useEffect를 여러 번 쓰면 되고, 처음 마운트 됐을 때 사용하려면 일반적으로 배열을 비워두면 된다. 만약 빈 배열도 없다면 리렌더링 될때마다 실행된다

 

정리하면 useEffect는 componentDidMount + componentDidUpdate + componentWillMount를 수행할 수 있고 데이터에 따라 componentDidMount만 실행할 수도 있다.

 

useRef

const [count, setCount] = useState(0)

useEffect(() => {
    // 이 효과는 컴포넌트가 렌더링될 때와 count 상태가 변경될 때 실행됩니다.
    document.title = `Count: ${count}`;

    // 컴포넌트가 언마운트될 때 정리 함수를 반환할 수 있습니다.
    return () => {
      document.title = 'My App'; // 컴포넌트가 언마운트될 때 타이틀을 원래대로 복구
    };
  }, [count]); // 이 효과는 count 상태가 변경될 때만 실행

위 코드에서 컴포넌트 별 데이터를 가져야하거나 리렌더링 후에 데이터를 유지해야할 필요가 있다.

 

물론 useState를 통해 만들어도 되고 let 변수를 사용할 수 있지만 useState는 화면 렌더링과 관련되어지므로 값을 변경하면 리렌더링이 발생하게 된다. let은 리렌더링이 발생하게 되면 데이터가 초기화 되어버린다.

 

이때 useRef를 사용하게 되며 리렌더링 되어도 기존의 데이터를 유지해주는 동시에 화면 리렌더링을 일으키지 않는다.

이를 활용하여 useEffect에서 useRef를 사용하게 된다면 componentDidUpdate 이벤트를 수행할 수 있고 조건을 설정한다면 componentDidMount를 무시할 수 있다.

 

정리하면 useRef는 리렌더링을 일으키지 않고 컴포넌트 내부에서 데이터를 유지하는 방법 중 하나이며, useEffect와 결합한다면 componentDidUpdate의 라이프 사이클 이벤트를 발생시킬 수 있다