React – 상태 관리와 Hooks – 커스텀 Hooks – 0 – 커스텀 훅 작성 방법

작성자 wooah
React – 상태 관리와 Hooks – 커스텀 Hooks – 0 – 커스텀 훅 작성 방법

React – 상태 관리와 Hooks – 커스텀 Hooks – 0 – 커스텀 훅 작성 방법

안녕하세요! 😊
이번에는 React에서 나만의 훅(Hook)을 만드는 방법, 바로 “커스텀 훅(Custom Hook)” 에 대해 알아보려고 해요!

처음엔 “훅을 내가 만든다고?” 싶지만, 실제로 해보면 정말 간단하고 유용해서 한 번 쓰면 계속 쓰게 되는 마성의 기능이랍니다.
커스텀 훅은 재사용성과 코드 정리, 그리고 로직의 분리에 정말 큰 도움을 줘요!

그럼 하나씩 차근차근 배워보면서 우리도 멋진 커스텀 훅을 만들어볼까요? 😊

1. 커스텀 훅(Custom Hook)이란?

**”커스텀 훅은 기존 훅들을 조합해서 만든, 이름만 있는 함수”**입니다.

즉, useState, useEffect, useRef 등 기본 훅을 활용해서
공통되는 로직을 함수로 빼낸 것이라고 이해하시면 돼요.

예: 공통 로직이 있는 상황

// 여러 컴포넌트에서 동일한 useEffect 로직을 반복
useEffect(() => {
  window.addEventListener('resize', handleResize);
  return () => window.removeEventListener('resize', handleResize);
}, []);

이렇게 중복되는 로직이 반복된다면, 커스텀 훅으로 분리하는 게 훨씬 효율적이겠죠?

2. 커스텀 훅 작성 기본 형식

커스텀 훅은 단순한 자바스크립트 함수에 불과하지만,
규칙이 하나 있어요!

✅ 이름은 꼭 use로 시작해야 함!

function useMyCustomHook() {
  // 내부에 다른 훅을 사용
  const [state, setState] = useState(null);
  return { state, setState };
}

이름을 use로 시작하지 않으면 React가 훅으로 인식하지 않아요!

3. 예제 ①: 윈도우 크기 추적 커스텀 훅

커스텀 훅 정의

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;
}

사용법

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

  return (
    <div>
      현재 창 크기: {width} x {height}
    </div>
  );
}
  • 👏 useWindowSize() 하나로 크기 추적 끝!
  • 여러 컴포넌트에서 쉽게 재사용 가능

4. 예제 ②: 로컬 스토리지 저장 훅

function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error(error);
      return initialValue;
    }
  });

  const setValue = (value) => {
    try {
      const valueToStore =
        value instanceof Function ? value(storedValue) : value;
      setStoredValue(valueToStore);
      localStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (error) {
      console.error(error);
    }
  };

  return [storedValue, setValue];
}

사용 예시

function Profile() {
  const [name, setName] = useLocalStorage('username', '홍길동');

  return (
    <div>
      <input value={name} onChange={(e) => setName(e.target.value)} />
      <p>저장된 이름: {name}</p>
    </div>
  );
}
  • 로컬 스토리지와 상태 관리가 완벽하게 통합된 느낌!
  • 마치 useState처럼 편하게 쓰면서도 로컬 저장까지 처리됨!

5. 커스텀 훅 만들 때의 규칙

규칙 설명
use로 시작할 것 React가 훅으로 인식
다른 훅들 안에서 호출 useState, useEffect 등 사용 가능
조건문, 반복문에서 훅 호출 금지 훅의 호출 순서가 바뀌면 안 됨
return 값은 자유 배열, 객체, 단일 값 등 자유롭게 가능

6. 커스텀 훅의 장점

장점 효과
코드 재사용성 ↑ 중복된 로직을 하나로 모아서 여러 컴포넌트에서 활용
가독성 ↑ 컴포넌트 내부 로직이 깔끔하게 정리
유지보수 용이 훅만 수정하면 모든 곳에 반영됨
테스트 용이 훅 단위로 테스트 가능

비유하자면?

커스텀 훅은 마치 프렌차이즈 본사 레시피 같아요!
매번 똑같은 방식으로 요리를 만들 수 있어서 효율도 좋고 품질도 일정하죠 😊

7. 자주 쓰이는 커스텀 훅 예시 아이디어

훅 이름 기능
useToggle 불리언 값을 토글
useDebounce 디바운싱 (입력 지연 처리)
usePrevious 이전 값 기억하기
useOnlineStatus 현재 네트워크 상태 확인
useScroll 스크롤 위치 추적
useOutsideClick 모달 등 외부 클릭 감지

8. 마무리하며

이제 여러분은 커스텀 훅을 통해 React의 로직을 자유자재로 조립하고 재사용할 수 있어요!
커스텀 훅은 실제 실무에서 유지보수성과 확장성을 엄청나게 높여주는 무기예요.

오늘의 핵심 요약!

🔹 커스텀 훅은 함수형 컴포넌트에서 훅들을 조합해 만든 재사용 가능한 함수
🔹 이름은 반드시 use로 시작
🔹 리액트 상태, 효과, DOM, 이벤트 등 모든 훅 사용 가능
🔹 공통 로직은 커스텀 훅으로 정리해서 코드 깔끔하게 유지!

다음 시간엔, 커스텀 훅을 상태관리나 API 호출, 디바운싱 등에 실제로 어떻게 적용할 수 있는지
더 구체적이고 응용적인 예제를 통해 이어가보겠습니다!
함께 한 발짝 더 성장해봐요! 🚀💙

답글 남기기