useState 중복을 custom Hook으로 만들기(js)

다음과 같이 코드가 중복되는 경우에는 커스텀 훅을 활용해 중복을 제거할 수 있다.

  const [email, setEmail] = useState('');
  const [nickname, setNickname] = useState('');
  
  const onChangeEmail = useCallback((e) => {
    setEmail(e.target.value);
  }, []);

  const onChangeNickname = useCallback((e) => {
    setNickname(e.target.value);
  }, []);

hooks 폴더 안에 useInput이라는 커스텀 훅을 만들어 중복을 제거해보자

import { useCallback, useState } from "react";

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

  const handler = useCallback((e)=>{
      setValue(e.target.value);
  }, [])
  return [value, handler, setValue]
}

export default useInput;

이렇게 커스텀훅을 만들어 준 후, 기존 중복됐던 코드를 변경해주자!

기존 코드

  const [email, setEmail] = useState('');
  const [nickname, setNickname] = useState('');
 > 
  const onChangeEmail = useCallback((e) => {
    setEmail(e.target.value);
  }, []);

  const onChangeNickname = useCallback((e) => {
    setNickname(e.target.value);
  }, []);

커스텀 훅 적용 후

import useInput from "@hook/useInput" // 커스텀 훅 파일 경로

const [email, onchangeEmail, setEmail] = useInput('');
const [nickname, onChangeNickname, setNickname] = useInput('');

나의 경우는 setEmail과 setNickname가 필요없어서 아래처럼 적어 작업했다.

const [email, onchangeEmail] = useInput('');