리액트 생명주기(life cycle)

💡 라이프사이클?

리액트는 컴포넌트 단위로 개발하는데 각 컴포넌트들은 생명주기를 가지고 있다. 생명주기는 생성, 업데이트, 소멸의 과정을 거친다.

• 클래스형 컴포넌트: 주로 생명주기 메서드를 통해 라이프사이클에 따라 컴포넌트를 조작
• 함수형 컴포넌트: 생명주기 메서드가 따로 존재하지 않기 때문에 리액트 HOOK을 사용하여 생명주기 메서드와 비슷하게 동작하도록 구현한다.

라이프사이클은 각 단계마다 메서드가 존재한다. 총 9가지 메서드가 있고 이는 클래스형 컴포넌트에서만 사용 가능하다.

https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

💡 클래스형 컴포넌트 생명주기

✨ 마운트(생성)

• constructor: 컴포넌트가 만들어지면 가장 먼저 실행되는 메서드

• getDerivedStateFromProps: props로 받아온 것을 state에 넣을 때 사용하는 메서드. 컴포넌트가 처음 렌더링 되기 전에 호출되며 리렌더링 되기 전에도 항상 실행된다.

• render: 컴포넌트를 렌더링하는 메서드

• componentDidMount: 컴포넌트의 첫 렌더링을 마친 후 호출되는 메서드. 이 메서드가 호출되는 시점에선 이미 컴포넌트가 화면에 출력된 상태이다. 이 단계에선 axios, fetch 등을 사용해 해당 컴포넌트에서 필요한 데이터를 요청하는 등의 작업을 진행한다.

✨ 업데이트(갱신)

• getDerivedStateFromProps: 마운트 단계와 동일. 컴포넌트의 props나 state가 변경됐을 때도 호출되는 메서드.

• shouldComponentUpdate: 컴포넌트의 리렌더링 여부를 결정하는 메서드. React.memo와 역할이 비슷하다.

• render: 컴포넌트를 렌더링하는 메서드

• getSnapshotBeforeUpdate: render에서 만들어진 결과가 브라우저에 실제 반영되기 직전에 호출되는 메서드. 컴포넌트에 변화가 일어나기 직전의 DOM 상태를 가져와서 특정 값을 반환하면 그 다음 발생하게 되는 componentDidUpdate 메서드에서 받아와 사용 할 수 있다.

• componentDidUpdate: 리렌더링을 마친 후 브라우저에 모든 변화가 나타난 후 호출되는 메서드. 세 번째 파라미터로 getSnapshotBeforeUpdate에서 반환한 값을 불러올 수 있다.

✨ 언마운트(제거)

• componentWillUnmount: 컴포넌트가 브라우저에서 사라지기 직전에 호출되는 메서드. 주로 DOM에 직접 등록했던 이벤트를 제거하는 등의 작업을 한다.

✨ 기타

• componentDidCatch: 컴포넌트 렌더링 중 에러가 발생했을 경우 애플리케이션이 중단되지 않고 오류 화면을 보여주는 메서드.

💡 함수형 컴포넌트 생명주기

컴포넌트 생성 속도, 가독성, hook의 활용 등의 이점으로 클래스형 컴포넌트 보다는 함수형 컴포넌트를 주로 사용하고 있다. 함수형 컴포넌트에는 클래스형 컴포넌트 처럼 지원하는 생명주기 메소드가 없다. 대신 hook으로 어떻게 대체해서 사용할 수 있는지 살펴보자.

• constructor : useRef 또는 useState 를 활용해 생성할 때 한 번만 동작하는 hook을 만들어 사용할 수 있다.

const useConstructor = (callback) => {
    const hasBeenCalled = useRef(false);
    if (hasBeenCalled.current) return;
    callback();
    hasBeenCalled.current = true;
}

• getDerivedStateFromProps : useState(initialState) 에 초기 상태 값으로 props 를 설정해서 사용

• render : 함수형 컴포넌트에서 retrun 에 대응

• componentDidMount : useEffect 를 사용

useEffect(() => {
    // componentDidMount 원하는 실행
}, []);

• shouldComponentUpdate : React.memo 를 사용

• getSnapshotBeforeUpdate, componentDidUpdate : 변화 감지를 원하는 props, state 를 useEffect deps로 설정하여 사용

• componentWillUnmount : useEffect 에 callback을 return 해서 사용

useEffect(() => {
  // componentDidUpdate 원하는 실행

    return () => {
        // componentWillUnmount 원하는 실행
    }
}, [deps]);

출처:
https://whwl.tistory.com/282
https://www.codeit.kr/topics/sp-fe3-weekly7/lessons/6884
https://ko.legacy.reactjs.org/docs/react-component.html
https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
https://react.vlpt.us/basic/25-lifecycle.html
https://dev.to/bytebodger/constructors-in-functional-components-with-hooks-280m
https://medium.com/swlh/lifecycle-state-and-getderivedstatefromprops-761b3a19c4e
https://medium.com/@t93/states-and-componentdidmount-in-functional-components-with-hooks-cac5484d22ad
https://velog.io/@hoi/React-Functional-Component%EC%9D%98-React.memo-%EC%82%AC%EC%9A%A9%EA%B8%B