[React] 함수형 컴포넌트의 라이프 사이클(hook)

해당 게시물은 생활코딩의 이고잉님 강의를 듣고 개인적으로 정리한 내용을 담고 있습니다👩‍💻

 

리액트 훅은 함수형 컴포넌트에서 클래스형 컴포넌트의 기능을 구현한 개념입니다. 예를 들어, 클래스 컴포넌트에서만 사용 가능했던 state를 훅(hook)을 이용해 함수형 component에서도 useState를 이용해서 상태 변수를 선언할 수 있습니다. 또한, useEffect를 통해 리액트 클래스의 componentDidMount, componentDidUpdate, componentWillUnmount와 같은 라이프 사이클을 관리할 수 있습니다.

 

useEffect 기능

- componentDidMount, componentDidUpdate 수행

useEffect는 컴포넌트 안에서 state, props에 접근이 가능하고, 기본적으로 첫 번째 렌더링과 그 이후의 모든 업데이트에서 수행된다. 또한, 두 번째 인자로 조건을 걸고 첫 번째 렌더링이나 특정 조건을 만족할 때 수행하도록 설정할 수 있다.

  useEffect(() => {
    // 브라우저 API를 이용하여 문서 타이틀을 업데이트
    document.title = `You clicked ${count} times`;
  });

 

- clean up 실행

모든 effect는 정리를 위한 함수를 반환할 수 있다. 즉, 추가와 제거가 하나의 effect를 구성하는 것이다. 정리되는 시점은 컴포넌트가 마운트 해제될 때 실행된다.

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    // effect 이후에 어떻게 정리(clean-up)할 것인지 표시
    return function cleanup() {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

 

- 성능 최적화

모든 렌더링 이후 effect를 정리하거나 적용하는 것이 때때로 성능 저하를 발생시키는 경우가 존재한다. 특정 값들이 리렌더링 시에 변경되지 않는다면 effect를 건너뛰도록 할 수 있다. useEffect는 선택적으로 두 번째 인수를 배열로 넘기면 가능하다.

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // count가 바뀔 때만 effect를 재실행

 

---

한 번에 hook을 이해하기에는 조금 힘들었다. 배운 내용을 토대로 정리를 했지만, 한번 더 복습을 해야할 것 같다. 여러 강의를 통해 클래스형 컴포넌트 사용에 길들여져 있었는데 의식적으로라도 함수형 컴포넌트도 사용하면서 컴포넌트 환경에 제한을 두지 않는 사람이 되도록 노력해야겠다고 생각했다.(다재다능한 사람이 되고싶은 나의 욕심은 항상 가득하다 흠🤔)