개발/React
React - Hook 사용 규칙과 Custom Hook 예제
hanks
2025. 6. 1. 15:55
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으로 추출해 유지보수성과 가독성을 높인다.