[react 공식문서] 30 Reusing Logic with Custom Hooks

리액트 공식문서 학습기록
https://react.dev/learn

Reusing Logic with Custom Hooks

Custom Hook - 컴포넌트 간 논리 공유

그냥 다른 hook들 모아논 함수 아님?

function useOnlineStatus() {
  const [isOnline, setIsOnline] = useState(true);
  useEffect(() => {
    function handleOnline() {
      setIsOnline(true);
    }
    function handleOffline() {
      setIsOnline(false);
    }
    window.addEventListener('online', handleOnline);
    window.addEventListener('offline', handleOffline);
    return () => {
      window.removeEventListener('online', handleOnline);
      window.removeEventListener('offline', handleOffline);
    };
  }, []);
  return isOnline;
}

이름은 use로 시작할 것

1. 컴포넌트는 대문자로 시작
2. hook은 use로 시작
3. hook을 호출하지 않는 함수는 use로 시작하지 말것

Custom hook을 사용하면 상태 자체가 아닌 상태 저장 논리를 공유할 수 있음

함수니까

Custom Hook을 사용하는 경우

약간의 중복된 코드를 반드시 Custom Hook으로 만들 필요는 없음.

• 데이터 흐름이 명시적
• Effect가 안으로 숨게 되므로 불필요한 종속성 추가 방지할 수 있음

Custom Hook은 더 나은 패턴으로 마이그레이션하는데 도움이 됨

Effect는 '탈출구’임. (더 적절한게 없을때만 쓰라는 뜻)