React 커스텀 Hook 만들기

커스텀 Hook 만들기

React에서 Hook은 함수형 컴포넌트에서 상태 관리와 생명주기 기능을 사용할 수 있도록 해주는 기능입니다.
커스텀 Hook은 이 Hook들을 조합하여 공통 로직을 재사용할 수 있게 해 줍니다.

1. 커스텀 Hook이란?

커스텀 Hook은 use로 시작하는 함수로, 내부에서 useState, useEffect 등 기존 Hook을 사용하여 기능을 확장하거나 재사용합니다.

✅ 예: 여러 컴포넌트에서 동일한 타이머나 입력 제어 로직이 필요할 때 커스텀 Hook으로 분리합니다.

2. 커스텀 Hook 예제 - useInput

사용자 입력값을 다루는 커스텀 Hook을 만들어보겠습니다.

// useInput.js import { useState } from 'react'; function useInput(initialValue) { const [value, setValue] = useState(initialValue); const onChange = (e) => { setValue(e.target.value); }; return { value, onChange, reset: () => setValue('') }; } export default useInput;

3. 커스텀 Hook 사용 예시

위에서 만든 useInput을 컴포넌트에서 사용하는 방법입니다.

// App.jsx import React from 'react'; import useInput from './useInput'; function App() { const name = useInput(''); const email = useInput(''); const handleSubmit = (e) => { e.preventDefault(); alert(`이름: ${name.value}, 이메일: ${email.value}`); name.reset(); email.reset(); }; return ( <form onSubmit={handleSubmit}> <input type="text" placeholder="이름" {...name} /> <input type="email" placeholder="이메일" {...email} /> <button type="submit">제출</button> </form> ); } export default App;

4. 장점 요약

• 공통 로직을 분리하여 유지보수가 쉬움
• 로직 재사용이 간편
• 컴포넌트가 더 간결해짐

💡 팁: 여러 개의 입력 필드를 처리할 땐 커스텀 Hook을 만들어 일관성 있게 관리해보세요!

5. 결론

커스텀 Hook은 React 개발에서 반복되는 로직을 추상화하고 컴포넌트를 깔끔하게 유지하는 강력한 도구입니다.
직접 만들어보며 나만의 유틸 Hook을 쌓아보세요.