[React] React Hook과 Custom Hook

 
목차
1. React Hook
2. custom Hook
 

---

 

1. React Hook

💡Hook이란?
 
Hook은 React의 함수 컴포넌트에서 상태관리와 생명주기 기능을 사용할 수 있도록 해주는 함수.
기존에는 클래스형 컴포넌트에서만 가능했던 기능들을 함수형에서도 사용할 수 있도록 만들어준 리액트의 핵심 기능이다.
 
Hook은 React 16.8에 새로 추가된 기능이며,
Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해준다고 한다. 
 
 
 
⚙️ 대표적인 Hook 종류

• useState: 컴포넌트의 상태값(state)을 저장하고 변경
• useEffect: 컴포넌트의 생명주기 관리 (마운트, 업데이트, 언마운트 등)
• useRef, useContext, useReducer, useMemo, useCallback 등 다양한 내장 훅 제공

 
 

⚙️ Hook tip

1. Hook은 함수 컴포넌트나 커스텀 훅 내부에서만 호출할 수 있다.
   → 일반 함수나 if 문 안에서는 사용할 수 없다.
2. 조건부로 Hook을 호출해서는 안 된다.
   → 모든 렌더링에서 동일한 순서로 실행되어야 하기 때문
3. 나만의 Hook(Custom Hook)을 만들 수 있다.
   → 재사용 가능한 로직을 훅 형태로 분리할 수 있다.
   → 함수 이름은 use로 시작해야 함 (예: useInput)

 
 
 

---

2. Custom Hook

 
✏️Custom Hook
반복적으로 사용되는 입력상태 로직이 있다면, 커스텀 훅으로 분리하여 사용한다.
 
 
💡
1. 커스텀 훅 만드는 법 →   함수 앞에 use를 붙인다. 
ex) useInput()
 
2. 어디로 분리?
:  components 가 아닌, 'hooks'폴더 생성 후 함수 이름의 .jsx파일을 만들어 분리시킴.
 

// useInput.js (hooks 폴더에 저장)
import { useState } from "react";

function useInput() {
  const [input, setInput] = useState("");

  const onChange = (e) => {
    setInput(e.target.value);
  };

  return [input, onChange];
}

export default useInput;

→ 입력 값을 관리하기 위한 useState 상태를 내부에 가지고 있으며,
input값과 이를 업데이트하는 onChange함수를 리턴해준다.
다른 컴포넌트에서 위의 useInput.jsx를 호출하면 input상태와 이벤트 핸들러를 바로 사용할 수 있다.
 
 

// HookExam.jsx (컴포넌트에서 사용)
import useInput from "../hooks/useInput";

const HookExam = () => {
  const [input, onChange] = useInput();

  return (
    <div>
      <input value={input} onChange={onChange} />
      <p>입력한 값: {input}</p>
    </div>
  );
};

export default HookExam;

→ useInput()을 통해 input과 onChange를 받아옴.
→  <input/> 컴포넌트에 값을 연결하여 입력 이벤트에 따라 값을 변경시킴.
→  useInput.jsx에서 useState를 import 함으로,  useInput.jsx를 import 해서 사용하는 HookExam.jsx는 이를 import 할 필요 없다.
 
 
 
 
 
 
 
⚙️커스텀 훅의 장점

• 로직 재사용: 반복되는 코드를 하나의 함수로 재사용 가능
• 컴포넌트 분리: UI와 로직이 깔끔하게 분리됨
• 테스트 편리: 훅만 따로 테스트하거나 디버깅 가능

 
 

---

 

 
💡 정리

Hook	함수형 컴포넌트에서 상태나 기능을 다룰 수 있도록 함
useState	가장 기본적인 Hook, 상태값을 만들고 관리
Custom Hook	훅을 직접 만들어서 재사용성을 높인 함수, use로 시작해야 함
주의사항	반드시 함수 컴포넌트/커스텀 훅 내부에서, 조건문 없이 사용해야 함

 
 
 
 
 
 
 
 
 
 
 
 
 
*Ref
https://ko.legacy.reactjs.org/docs/hooks-overview.html

Hook 개요 – React

 
 
 
설명이 부족한 부분이나 피드백은 댓글로 남겨주세요!
감사합니다 ☺️