custom hook 만드는법 알아보기

custom hook 이란?

커스텀 훅이란 나만의 리액트 훅 이다.

필요한 커스텀 훅을 만들어 놓으면, 필요할 때 마다 사용이 가능해서 재사용성이 높아 효율적이다.

custom hook 만들어보기

useInput 만들어보기

'use client';

import { ChangeEvent, useState } from 'react';

const CustomHook = () => {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
     setInputValue(e.target.value);
  };

  const handleSubmit = () => {
    alert(inputValue);
  };

  return (
    <div>
      <h1>useInput</h1>
      <input value={inputValue} onChange={handleChange} />
      <button onClick={handleSubmit}>확인</button>
    </div>
  );
};

export default CustomHook;

다음과 같은 컴포넌트가 있을때 커스텀 훅으로 기능을 분리 시킬 수 있다.

 

useInput.ts

import { ChangeEvent, useState } from 'react';

export function useInput(initialValue: string, submitAction: (message: string) => void): [string, (e: ChangeEvent<HTMLInputElement>) => void, () => void] {
  // custom hook 을 만들때에는 함수 이름 앞에 use를 작성해준다.

  const [inputValue, setInputValue] = useState(initialValue);

  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    setInputValue(e.target.value);
  };

  const handleSubmit = () => {
    setInputValue('');
    submitAction(inputValue);
  };

  return [inputValue, handleChange, handleSubmit];
}

page.tsx

'use client';

import { useInput } from '@/app/custom/useInput';

function displayMessage(message: string) {
  alert(message);
}

const CustomHook = () => {
  const [inputValue, handleChange, handleSubmit] = useInput('', displayMessage);

  return (
    <div>
      <h1>useInput</h1>
      <input value={inputValue} onChange={handleChange} />
      <button onClick={handleSubmit}>확인</button>
    </div>
  );
};

export default CustomHook;

useInput.ts 코드를 분리 시킴으로써 현재는 코드가 길어진것 처럼 보이지만, useInput 의 코드는 언제 어디서든 다시 사용할 수 있는 hook으로 사용될 수 있다.

custom hook 을 만들때 간단한 주의 사항은 custom hook 인걸 인지 시키기 위해 hook 이름 앞에 use를 붙여주는 개발자간의 약속이 있다는 점을 기억하자

custom hook의 특징

custom hook에서 state와 effect는 독립적으로 작동한다.

한 컴포넌트의 여러개의 custom hook 은 각각 독립적으로 작동한다.