공식 문서

• 소개

  • 리액트 개념에 좀더 직관적인 API를 제공 (props state lifecycle context re)

  • [ 동기 ]

    • 컴포넌트 사이에서 상태와 관련된 로직을 재사용하기가 어렵다

      → 예를 들면 컴포넌트에 재사용 가능한 행동을 붙이기 위해서는 render props , high order component, Provider 등 과 같은 래퍼를 이용해야만 했다

      → 훅을 이용하게 되면 상태관련 로직을 추상화 할수 있기에 계층 변화없이 로직을 재사용 할수 있게 도와준다 (커스텀 훅 이용)

    • 기존에 이용하던 라이프 사이클의 함수는 여러 관련 없는 로직들을 섞어서 써야 했기 때문에 버그와 무결성이 너무 쉽게 발생되었다

      → 훅을 통해 라이프사이클에 의해 쪼개지 않고 로직(구독 설정 및 데이터 불러오기와 같은) ****에 기반을 둔 작은 함수로 나눌수 있게되었다

    • class 는 최적화를 더 느린 경로로 되돌리는 의도치 않은 패턴을 장려하게 된다 , 축소 되기가 어렵다, 핫 리로딩이 깨지기 쉽다

    • React Component는 함수에 가깝기 때문에 훅을 장려

  • [ Effect Hook ]

    • 모든 렌더마다 실행이 된다 → didmount didupdate로 나뉘어 있던 라이프 사이클과는 조금 다르게 모든 렌더 다음에 실행된다고 이해하면 좋다
    • 라이프 사이클과는 다르게 브라우저가 화면 업데이트 하는것을 막지않기 때문에 조금 더 반응적으로 느끼게하고 이전과 같이 동기적인 실행이 필요없다
    • clean up : effect가 끝나고 실행하게되서 정리가 가능하게 만들어줌, 컴포넌트가 언마운트 될때 실행된다.

  • [ Custom Hook ]

    • use.. 이름으로 만들어야 함

    • 서로 다른 컴포넌트가 하나의 훅의 state 공유 하지 못한다 그때그때 isolated 되어있다

      → 그냥 선언해서 호출한 것과 같다

    import React, { useState, useEffect } from 'react';
    
    function FriendListItem(props) {
      const [isOnline, setIsOnline] = useState(null);
    
      useEffect(() => {
        function handleStatusChange(status) {
          setIsOnline(status.isOnline);
        }
    
        ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
        return () => {
          ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
        };
      });
    
      return (
        <li style={{ color: isOnline ? 'green' : 'black' }}>
          {props.friend.name}
        </li>
      );
    }
    

    커스텀 훅 사용

    import React, { useState, useEffect } from 'react';
    
    function useFriendStatus(friendID) {
      const [isOnline, setIsOnline] = useState(null);
    
      useEffect(() => {
        function handleStatusChange(status) {
          setIsOnline(status.isOnline);
        }
    
        ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
        return () => {
          ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
        };
      });
    
      return isOnline;
    }
    

    function FriendListItem(props) {
      const isOnline = useFriendStatus(props.friend.id);
    
      return (
        <li style={{ color: isOnline ? 'green' : 'black' }}>
          {props.friend.name}
        </li>
      );
    }