React - Hook 사용 규칙과 Custom Hook 예제

 

React에서 Hooks는 함수형 컴포넌트에서 상태 관리와 생명주기 기능을 사용할 수 있도록 도와준다. 하지만 사용 시 몇 가지 중요한 규칙을 반드시 지켜야 한다. 아래는 흔히 발생하는 오류와 함께 기본 규칙, 그리고 Custom Hook을 활용한 코드 리팩토링 예제를 정리한 것이다.

---

React Hook 사용 시 반드시 지켜야 할 규칙

1. 함수 컴포넌트 또는 Custom Hook 내부에서만 호출해야 함

Hooks는 컴포넌트 함수의 최상위에서만 호출해야 하며, 함수 외부에서 직접 호출하면 에러가 발생한다.

❌ 잘못된 예시:

import { useState } from "react";

const [state, setState] = useState(); // ❌ 컴포넌트 함수 바깥에서 사용

const HookExam = () => {
  return <div>hookexam</div>;
};

export default HookExam;

✅ 올바른 예시:

import { useState } from "react";

const HookExam = () => {
  const [state, setState] = useState();
  return <div>hookexam</div>;
};

export default HookExam;

---

2. 조건문, 반복문, 중첩 함수 안에서 호출하면 안 됨

Hooks는 항상 컴포넌트가 렌더링될 때 동일한 순서로 호출되어야 한다. 조건문, 반복문, 중첩 함수 안에 있으면 실행 순서가 달라져 버그가 발생할 수 있다.

❌ 잘못된 예시:

import { useState } from "react";

const HookExam = () => {
  if (true) {
    const state = useState(); // ❌ 조건문 안에서 호출
  }
  for (let i = 0; i < 5; i++) {
    const state = useState(); // ❌ 반복문 안에서 호출
  }
  return <div>hookexam</div>;
};

export default HookExam;

✅ 올바른 예시:

import { useState } from "react";

const HookExam = () => {
  const [state, setState] = useState();
  return <div>hookexam</div>;
};

export default HookExam;

---

🔄 반복되는 로직은 Custom Hook으로 분리하자

여러 input 값을 관리하는 경우, useState와 onChange를 반복적으로 작성하게 된다. 이 때는 Custom Hook으로 로직을 분리하면 훨씬 깔끔해진다.

리팩토링 전:

HookExam.jsx

import { useState } from "react";

const HookExam = () => {
  const [input, setInput] = useState("");
  const [input2, setInput2] = useState("");

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

  const onChange2 = (e) => {
    setInput2(e.target.value);
  };
  return (
    <div>
      <input value={input} onChange={onChange} />
      <input value={input2} onChange={onChange2} />
    </div>
  );
};

export default HookExam;

---

리팩토링 후 (Custom Hook 활용):

✅ useInput.jsx

import { useState } from "react";

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

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

  return [input, onChange];
}

export default useInput;

✅ HookExam.jsx

import useInput from "../hooks/useInput";

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

  return (
    <div>
      <input value={input} onChange={onChange} />
      <input value={input2} onChange={onChange2} />
    </div>
  );
};

export default HookExam;

---

📌 정리

• Hooks는 무조건 컴포넌트 함수 또는 커스텀 Hook 내부에서만 호출한다.
• 조건문, 반복문, 중첩 함수 안에서는 절대 호출하지 않는다.
• 반복되는 로직은 Custom Hook으로 추출해 유지보수성과 가독성을 높인다.