리액트를 배운 지 벌써 일주일입니다! 지금까지 컴포넌트를 만들고, State로 상태를 관리하고, Props로 데이터를 전달하는 법을 배웠습니다.
하지만 프로젝트 규모가 커지면 필연적으로 "똑같은 로직을 여기저기서 복사 붙여넣기 하고 있네?"라는 고민에 빠지게 됩니다.
오늘은 이 고민을 해결해 줄 리액트의 꽃, 커스텀 훅(Custom Hooks)을 심도 있게 파헤쳐 보겠습니다.
1. 왜 커스텀 훅이 필요한가? (DRY 원칙)
프로그래밍에는 DRY(Don't Repeat Yourself)라는 원칙이 있습니다. "똑같은 일을 두 번 하지 마라"는 뜻이죠.
리액트 컴포넌트는 크게 두 부분으로 나뉩니다.
- UI 로직: HTML 태그를 어떻게 배치하고 스타일링할 것인가?
- 비즈니스 로직: 데이터를 어떻게 가져오고, 상태를 어떻게 변경할 것인가?
여러 컴포넌트에서 비즈니스 로직(예: 입력값 처리, API 호출, 타이머 등)이 중복될 때, 이를 하나의 함수로 따로 빼내어 관리하는 것이 바로 커스텀 훅입니다.
2. 커스텀 훅의 핵심 규칙
커스텀 훅을 만들 때는 리액트가 정한 약속을 반드시 지켜야 합니다.
- 이름은 반드시 use로 시작: useFetch, useInput 처럼 작성해야 리액트 엔진이 "아, 이건 훅이구나!"라고 인식하고 내부 최적화를 진행합니다.
- 최상위에서만 호출: 조건문(if)이나 반복문(for) 안에서 훅을 호출하면 리액트의 상태 관리 순서가 꼬일 수 있습니다.
- 독립적인 상태: 가장 많이 오해하는 부분입니다. 커스텀 훅을 공유한다고 해서 상태(State)값이 공유되는 것은 아닙니다. 로직(Logic)만 공유할 뿐, 각 컴포넌트에서 호출할 때마다 새로운 상태가 만들어집니다.
3. [실습] 실무형 커스텀 훅: useInput 심화 버전
단순히 값만 바꾸는 게 아니라, 여러 개의 입력창을 관리하고 초기화 기능까지 포함된 훅을 만들어 봅시다.
hooks/useInput.js
JavaScript
import { useState } from 'react';
function useInput(initialForm) {
const [form, setForm] = useState(initialForm);
// 입력값이 변경될 때 실행되는 핸들러
const onChange = (e) => {
const { name, value } = e.target;
setForm((prev) => ({ ...prev, [name]: value }));
};
// 폼을 초기화하는 함수
const reset = () => setForm(initialForm);
return [form, onChange, reset];
}
export default useInput;
App.jsx 에서 사용하기
JavaScript
import useInput from './hooks/useInput';
function App() {
const [form, onChange, reset] = useInput({ username: '', email: '' });
const handleSubmit = (e) => {
e.preventDefault();
console.log(form);
reset(); // 전송 후 초기화!
};
return (
<form onSubmit={handleSubmit}>
<input name="username" value={form.username} onChange={onChange} placeholder="이름" />
<input name="email" value={form.email} onChange={onChange} placeholder="이메일" />
<button type="submit">등록</button>
</form>
);
}
4. 코드 구조화: 깔끔한 프로젝트 만들기
커스텀 훅을 배우고 나면 폴더 구조도 그에 맞춰 진화해야 합니다.
- src/components: 재사용 가능한 UI 컴포넌트 (Button, Input 등)
- src/hooks: 우리가 만든 커스텀 훅들
- src/pages: 특정 기능을 수행하는 큰 단위의 화면 컴포넌트
- src/utils: 순수 자바스크립트 함수 (날짜 계산, 포맷 변경 등)
이렇게 나누면 나중에 코드를 수정할 때 어디를 만져야 할지 한눈에 알 수 있습니다.
5. 7일차 학습을 마치며
커스텀 훅은 처음엔 어렵게 느껴질 수 있지만, 한번 맛을 들이면 "컴포넌트가 이렇게 가벼워질 수 있다고?" 하며 감탄하게 됩니다. UI와 로직을 분리하는 연습을 계속해 보세요. 그것이 바로 고급 리액트 개발자로 가는 지름길입니다!
Copyright 2026. [Ryon] all rights reserved.