[React] 커스텀 훅

벨로퍼트와 함께하는 모던 리액트를 학습하여 작성했습니다.

https://react.vlpt.us/

---

1.커스텀 훅

커스텀 훅(Custom Hooks)은 React의 훅 시스템을 활용하여 재사용 가능한 로직을 작성하는것입니다.
커스텀 훅은 use로 시작하는 함수로, 일반적으로 여러 훅을 조합하여 특정 기능을 캡슐화합니다.
컴포넌트에서 다른 훅처럼 사용할 수 있으며, 로직을 재사용할 수 있습니다.

 

 

 

 

2.예시 (화면 너비를 추적하는 커스텀 훅)

import { useState, useEffect } from 'react';
import React from 'react';
// 화면 너비를 추적하는 커스텀 훅
function useWindowWidth() {
  const [windowWidth, setWindowWidth] = useState(window.innerWidth);

  useEffect(() => {
    // 리사이즈 이벤트 핸들러
    const handleResize = () => {
      setWindowWidth(window.innerWidth);
    };

    // 이벤트 리스너 등록
    window.addEventListener('resize', handleResize);

    // 컴포넌트 언마운트 시 이벤트 리스너 정리
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []); // 빈 배열: 마운트와 언마운트 시 한 번만 실행

  // 상태 반환
  return windowWidth;
}

function App() {
  const width = useWindowWidth(); // 커스텀 훅 사용

  return (
    <div>
      <p>현재 화면 너비: {width}px</p>
    </div>
  );
}

export default App;