프론트엔드에서 사용하기 좋은 Design Pattern - Custom Hook

🛠 Custom Hooks

개념

• React의 Hook(useState, useEffect 등)을 조합해서
• 나만의 로직을 함수 형태로 분리하는 것.
• 이름은 항상 use로 시작한다.

📦 쉽게 말하면, “상태 로직을 재사용 가능한 함수로 빼낸 것“이 Custom Hook

---

왜 사용할까?

• 로직 재사용
  - 여러 컴포넌트에서 반복되는 상태 관리나 비즈니스 로직을 쉽게 공유 가능.
• 컴포넌트 코드 깔끔하게 유지
  - UI와 로직을 분리해서 가독성 대폭 향상.
• 테스트 및 유지보수 편리
  - 기능 단위로 테스트할 수 있고 수정이 쉬움.

---

기본 사용 예시

➡️ 예를 들어, “윈도우 사이즈 추적”하는 Custom Hook을 만들어보자

// useWindowSize.js
import { useState, useEffect } from "react";

function useWindowSize() {
  const [size, setSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });

  useEffect(() => {
    const handleResize = () => {
      setSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    };

    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return size;
}

export default useWindowSize;

➡️ 사용하는 쪽에서는 이렇게 간단하게!

import useWindowSize from "./useWindowSize";

function App() {
  const { width, height } = useWindowSize();

  return (
    <div>
      <h1>Window size: {width} x {height}</h1>
    </div>
  );
}

설명

• useWindowSize()를 호출하면 현재 브라우저 창 크기를 바로 쓸 수 있다.
• 컴포넌트 입장에서는 훅 하나만 부르면 끝

---

구조 그림

Custom Hook:  useWindowSize()
 └─ useState (상태 저장)
 └─ useEffect (윈도우 리사이즈 이벤트 등록)
 └─ 데이터 반환 (width, height)

컴포넌트: App
 └─ useWindowSize() 호출
 └─ width, height로 화면 렌더링

---

Custom Hooks의 핵심 규칙

1. 이름은 use로 시작해야 한다.
2. 오직 함수 최상단에서만 호출
3. React의 다른 Hook들을 사용할 수 있다.

---

일반 컴포넌트와 Custom Hook 차이

항목	컴포넌트	Custom Hook
반환 값	JSX(화면)	데이터, 함수 등 로직
목적	화면 그리기	상태 로직 재사용, 분리