[React] 리액트의 라이프 사이클

💡 리액트의 라이프 사이클

➰ 리액트 컴포넌트에는 생명 주기가 있는데 이를 라이프 사이클이라고 표현한다.

➰ 컴포넌트는 생성(Mounting) -> 업데이트(Updating) -> 제거(Unmounting) 의 생명 주기를 갖는다.

➰ 리액트 클래스 컴포넌트는 라이프 사이클 메서드를 사용하고, 함수형 컴포넌트는 리액트 훅인 useEffect를 사용한다.

 

💡 클래스 컴포넌트의 라이프 사이클 메서드

1. 마운트

➰ 컴포넌트가 생성되는 시점을 의미한다.
➰ constructor -> getDerivedStateFromProps -> render -> componentDidMount 순서로 메서드가 호출된다.
constructor()

컴포넌트 생성자 메서드로 컴포넌트가 만들어지면 가장 먼저 실행되는 메서드
getDerivedStateFromProps()

props로 받아온 것을 state로 넣어주고 싶을 때 사용한다.

컴포넌트가 처음 렌더링 되기 전에 호출되며 리렌더링 되기 전에도 항상 실행된다. Props나 State가 변경되었을 때도 호출된다.
render()

컴포넌트를 렌더링하는 메서드
componentDidMount()

컴포넌트의 첫번째 렌더링이 끝나고 나면 호출되는 메서드로, 이 메서드가 호출되는 시점에선 컴포넌트가 화면에 출력된 상태이다.

 

2. 업데이트

➰ 컴포넌트가 업데이트 되는 시점을 의미한다.

➰  getDerivedStateFromProps -> shouldComponentUpdate -> render -> getSnapshotBeforeUpdate -> componentDidUpdate 순서로 메서드가 호출된다.
shouldComponentUpdate()

컴포넌트의 리렌더링 여부를 결정하는 메서드로 React.memo와 유사하다.
getSnapshotBeforeUpdate()

render에서 만들어진 결과가 브라우저에 실제 반영되기 직전에 호출되는 메서드.

컴포넌트에 변화가 일어나기 직전의 DOM 상태를 가져와서 특정 값을 반환하면, 그 다음 발생하는 componentDidUpdate에서 받아와서 사용할 수 있다.
componentDidUpdate()

리렌더링 마치고, 화면에 우리가 원하는 변화가 모두 반영되고 난 뒤에 호출되는 메서드, 의존성 배열이 변할때만 useEffect가 실행되는 것과 같다.

 

3. 언마운트

➰ 컴포넌트가 화면에서 사라지는 시점을 의미한다.

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

componentWillUnmount()

주로 DOM에 직접 등록했던 이벤트를 제거한다.

 

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

➰ useEffect를 사용해서 클래스 컴포넌트의 라이프 사이클과 유사하게 구현할 수 있다.

➰ 화면에 렌더링이 완료된 후에 수행되며 componentDidMount, componentDidUpdate, componentWillUnmout가 합쳐진 것

// 1. 컴포넌트가 리렌더링 될 때 마다 실행됨.
useEffect(() => {
}) 

// 2. componentDidMount()
// 렌더링이 완료된 후 호출됨 => 마운트 이후 1회만 실행
useEffect(() => {
}, [])

// 3. componentDidUpdate() & getDerivedStateFromProps()
// 컴포넌트 업데이트 작업이 완료된 후 실행됨 => 2번째 파라미터 배열에 적어준 변수가 변경될 때만 실행
useEffect(() => {
}, [props, state, ...]}

// 4. componentWillUnmount()
// 언마운트 관련 코드는 return 콜백에 작성
useEffect(() => {
    return () => {
   	    // unmount 코드
    }
}, [props, state, ...])