커스텀 훅(Custom Hook)

React Hooks의 개념을 확장하여 재사용 가능한 로직을 만들 수 있는 기능입니다. 커스텀 훅을 사용하면 여러 컴포넌트에서 공통으로 사용되는 로직을 쉽게 추출하고 관리할 수 있습니다. 기본적으로 커스텀 훅은 일반 JavaScript 함수이며, 내부에서 기존의 React Hooks를 사용할 수 있습니다.

 

커스텀 훅의 이름은 보통 use로 시작합니다. 이렇게 작명하는 이유는 훅 사용 규칙을 준수하고, 커스텀 훅이 일반 함수와 혼동되지 않게 하기 위함입니다.

 

커스텀 훅 사용 전 로직

 

import React, { useState } from 'react';

const App = () => {
  const [id, setId] = useState('');
  const [nick, setNick] = useState('');
  const [password, setPassword] = useState('');

  const onChangeId = (e) => {
    setId(e.target.value);
  };
  const onChangeNick = (e) => {
    setNick(e.target.value);
  };
  const onChangePassword = (e) => {
    setPassword(e.target.value);
  };

  const onSubmit = (e) => {
    e.preventDefault();
    console.log(`id : ${id}, nick : ${nick}, password : ${password}`);
  };

  return (
    <form onSubmit={onSubmit}>
      <div>
        <label htmlFor="user-id">아이디 : </label>
        <input
          id="user-id"
          name="user-id"
          value={id}
          required
          onChange={onChangeId}
        />
      </div>
      <div>
        <label htmlFor="user-nick">닉네임 : </label>
        <input
          id="user-nick"
          name="user-nick"
          value={nick}
          required
          onChange={onChangeNick}
        />
      </div>
      <div>
        <label htmlFor="user-password">비밀번호 : </label>
        <input
          id="user-password"
          name="user-password"
          type="password"
          value={password}
          required
          onChange={onChangePassword}
        />
      </div>
      <button type="submit">전송</button>
    </form>
  );
};

export default App;

 

---

커스텀 훅 사용 후 로직

 

import { useState } from 'react';

const useInput = (initialValue) => {
  const [value, setValue] = useState(initialValue);

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

  return [value, onChange];
};


const App = () => {
  const [id, onChangeId] = useInput('');
  const [nick, onChangeNick] = useInput('');
  const [password, onChangePassword] = useInput('');

  const onSubmit = (e) => {
    e.preventDefault();
    console.log(`id : ${id}, nick : ${nick}, password : ${password}`);
  };

  return (
    <form onSubmit={onSubmit}>
      <div>
        <label htmlFor="user-id">아이디 : </label>
        <input
          id="user-id"
          name="user-id"
          value={id}
          required
          onChange={onChangeId}
        />
      </div>
      <div>
        <label htmlFor="user-nick">닉네임 : </label>
        <input
          id="user-nick"
          name="user-nick"
          value={nick}
          required
          onChange={onChangeNick}
        />
      </div>
      <div>
        <label htmlFor="user-password">비밀번호 : </label>
        <input
          id="user-password"
          name="user-password"
          type="password"
          value={password}
          required
          onChange={onChangePassword}
        />
      </div>
      <button type="submit">전송</button>
    </form>
  );
};


export default App;

 

https://stackblitz.com/edit/react-1vbvtx?file=src/App.js