React.js의 LifeCycle (with Hooks)

전에 처음 리액트를 배울 때는 클래스 컴포넌트가 주였다.

그러다가 얼마 뒤에 Hooks가 나오게 되었지만 회사에 있었을 때는 계속 클래스 컴포넌트를 이용했다.

그래서 리액트 라이프 사이클을 클래스 기준으로 알고 있었는데,

이제 훅을 사용하면서 훅 기준의 라이프 사이클을 알아봐야겠다고 생각했다.

---

React의 라이프 사이클

우선 리액트 컴포넌트는 세가지 상태에따라 구분된다.

- Mounting: 컴포넌트 객체가 생성되어 트리에 추가될 때
- Updating: props나 state가 변경될 때에 따라서 구성이 바뀔 때
- Unmounting: 트리에서 제거될 때

다음과 같이 있는데, 중요한 함수 4개만 보자.

- render: 말 그대로 컴포넌트의 결과 형태를 반환하여 출력함
- componentDidMount: 컴포넌트가 mount된 후에 1회 실행되는 함수
- componentDidUpdate: 컴포넌트가 업데이트 될 때마다 실행되는 함수
- componentWillUnmount: 컴포넌트가 제거될 때 실행되는 함수

전에는 shouldComponentUpdate인가 뭔가 하는 애도 있었는데
업데이트 되면서 없어진걸로 안다.

---

Hooks로 라이프 사이클을 제어하는 방법

이제 위의 4개 함수와 Hooks를 이용한 방식을 비교해보도록 하자.

componentDidMount

componentDidMount를 대체하는 Hook은 없다.
하지만 잡기술을 통해 구현할 수는 있다.

componentDidMount와 ComponentDidUpdate를 합친 Hook이 있는데,
바로 useEffect다.

그런데 이 useEffect의 두번째 인자는 배열인데,
이 배열에 있는 값이 바뀌면 첫번째 인자(콜백)가 호출되는 방식이다.

이 두번째 인자를 빈 배열([])로 주게 되면, 값이 영영 바뀌지 않아서
mount될 때만 한 번 실행되게 된다.

useEffect(() => { console.log("component Did Mount"); }, []);

---

componentDidUpdate

위에서 설명한 대로 useEffect에 적절한 인자를 넣어주는 걸로 대체가 가능하다.

여기서는 썰을 풀어볼까 하는데, 아까 말한 shouldComponentUpdate가 있을 때에는
보통 이런 류의 코드가 들어갔다.

shouldComponentUpdate(prev, new) {
  if (prev.a === new.a) {
    return false;
  }
  
  return true;
}

눈치가 빠르면 알겠지만 값이 변경되었나를 확인하여 컴포넌트를 업데이트 할건지 결정하는 함수였다.

어? 값이 변경...? 업데이트...?

그렇다. useEffect의 두번째 인자가 값을 받는 이유는
특정한 상황에서만 업데이트되도록 하는
shouldComponentUpdate + componentDidUpdate의 합작이었던 것이다.

---

componentWillUnmount

C++을 배웠다면 소멸자에 해당하는 역할이다.
그렇다면 이건 Hook에서 어떻게 처리할까?

useEffect(() => {
  return () => {
    //something release
  };
}, []);

그렇다. useEffect에서 콜백을 반환하면 그게 componentWillUnmount가 된다.

---

정리

코드로 하나의 컴포넌트를 만들어 설명해보도록 해보자.

function ComponentA() {
  const [foo, setFoo] = useState();

  useEffect(() => {
    // componentDidMount
    
    return () => {
      // componentWillUnmount
    }
  }, []);
  
  useEffect(() => {
    // componentDidUpdate
  }, [foo]);

  // return === render()
  return (
    <></>
  );
}

---

참고 자료

https://betterprogramming.pub/react-component-lifecycle-methods-with-react-hooks-efcd04987805

React Component Lifecycle Methods With React Hooks