커스텀 훅 (Custom Hooks)

 커스텀훅이란?

• React에서 상태 관리 로직이나 부수효과 (sideEffect)를 재사용 가능한 방식으로 캡슐화한 함수→ use로 시작하도록 명명
• useState, useEffect 등 Hook을 사용하여 원하는 기능을 구현해주고, 컴포넌트에서 사용하고 싶은 값이나 로직들을 반환
• 여러 컴포넌트에서 중복되는 로직을 함수로 추출하여 코드 재사용성을 높이고, 가독성을 개선하는 데 사용

 

커스텀 훅 핵심적인 특징

• 여러 컴포넌트에서 동일하게 사용되는 로직을 묶어서 커스텀 훅으로 만들면 중복 코드를 줄일 수 있습니다.
• 커스텀 훅은 상태(state)를 관리하거나, API 호출, 데이터 저장 등 부수 효과(side effect)를 처리하는 로직을 캡슐화할 수 있습니다.
• 복잡한 로직을 커스텀 훅으로 분리하면 컴포넌트 코드가 깔끔해지고 가독성이 높아집니다.
• 로직 변경이 필요할 때 커스텀 훅만 수정하면 되므로 유지 보수가 용이해집니다

 

//커스텀 훅을 사용하지 않은 경우
import { useState, useEffect } from "react";

const NetworkStatusBanner = () => {
  const [online, setOnline] = useState(navigator.onLine);

  useEffect(() => {
    const handleOnline = () => setOnline(true);
    const handleOffline = () => setOnline(false);

    window.addEventListener("online", handleOnline);
    window.addEventListener("offline", handleOffline);

    return () => {
      window.removeEventListener("online", handleOnline);
      window.removeEventListener("offline", handleOffline);
    };
  }, []);

  if (!online) {
    return <div style={{ background: "red", color: "white" }}>⚠ 인터넷 연결 끊김</div>;
  }

  return null;
};

//커스텀 훅을 사용한 경우
const NetworkStatusBanner = () => {
  const online = useOnlineStatus(); // 커스텀 훅에서 상태 받아오기
  
	// 나머지는 동일!  

  if (!online) {
    return <div style={{ background: "red", color: "white" }}>⚠ 인터넷 연결 끊김</div>;
  }
  return null;
};

//커스텀 훅을 사용한 경우 
import { useState, useEffect } from "react";

const useOnlineStatus = () => {
	// 볼드 부분이 기존 컴포넌트에서 쓰던 로직
  const [online, setOnline] = useState(navigator.onLine);

  useEffect(() => {
    const handleOnline = () => setOnline(true);
    const handleOffline = () => setOnline(false);

    window.addEventListener("online", handleOnline);
    window.addEventListener("offline", handleOffline);

    return () => {
      window.removeEventListener("online", handleOnline);
      window.removeEventListener("offline", handleOffline);
    };
  }, []);

  return online; // 이 부분만 추가
};

 

 

• 커스텀 훅과 유틸 함수(util function)의 차이점
  • 상호작용: 커스텀 훅은 React 컴포넌트와 상호작용하며 상태를 관리하고 부수 효과를 처리하는 데 사용됩니다. 반면, 유틸 함수는 독립적인 로직을 수행하며 컴포넌트와 직접적인 상호작용이 없습니다.
  • 상태 관리: 커스텀 훅은 상태를 관리할 수 있지만, 유틸 함수는 상태를 관리하지 않습니다.
  • 재사용: 커스텀 훅은 컴포넌트 내에서 재사용되고, 유틸 함수는 여러 컴포넌트 및 모듈에서 재사용될 수 있습니다.
  다시말해, 반복되는 로직을 리액트 내장 훅 들을 사용하여 구현하면 커스텀 훅이고 분리한 로직 속에 리액트 훅이 없으면 js함수(유틸함수)라고 생각하면 됩니다

 

커스텀 훅 저장 위치

components
재사용 가능한 컴포넌트들이 위치하는 폴더입니다.
컴포넌트는 매우 많아질 수 있기 때문에 이 폴더 내부에서 하위폴더로 추가로 분류하는 경우가 많습니다.

assets
이미지 혹은 폰트와 같은 파일들이 저장되는 폴더입니다.
이미지와 같은 파일들을 public에 직접 넣는 경우도 있는데 둘의 차이는 컴파일시에 필요한지 여부입니다.
파비콘과 같이 index.html내부에서 직접 사용하여 컴파일 단계에서 필요하지 않은 파일들은 public에
반면, 컴포넌트 내부에서 사용하는 이미지 파일인 경우 이 assets 폴더에 위치시켜야 합니다.

hooks
커스텀 훅이 위치하는 폴더입니다.

pages
react router등을 이용하여 라우팅을 적용할 때 페이지 컴포넌트를 이 폴더에 위치시킵니다.

constants
공통적으로 사용되는 상수들을 정의한 파일들이 위치하는 폴더입니다.

styles
css 파일들이 포함되는 폴더입니다. (Styled-Componets, Emotion 포함)

services (api)
보통 api관련 로직의 모듈 파일이 위치하며 auth와 같이 인증과 관련된 파일이 포함됩니다.

utils
정규표현식 패턴이나 공통함수 등 공통으로 사용하는 유틸 파일들이 위치하는 폴더입니다.