React 커스텀 Hook 만들기

1. 커스텀 Hook?

말 그대로 내가 커스텀해서 쓰는 Hook인데,

Hook은 재사용 가능한 기능을 말한다.

Custom Hooks는 use로 시작해야 한다. ex. useFetch

 

2. 커스텀 Hook 만드는 법

use이름 으로 만들어진 파일 안에서 useState, useEffect, useReducer, useCallback 등 Hooks를 사용하여 원하는 기능을 구현해주고 컴포넌트에서 사용하고 싶은 값을 반환해주면 된다.

 

3. 활용해보기

여러개의 함수를 제어해 바뀔 때마다 State에 저장하는 함수가 join, login, payment, editproduct 페이지에서 사용이 되고 있었다. 이걸 커스텀 Hook으로 빼주면 좋겠다는 생각을 했다.

 

우선 원래 코드는 이렇다. 네 개의 페이지 모두 동일하므로 join 페이지 하나를 예시로 들겠습니다.

 

  const [inputs, setInputs] = useState({
    userName: '',
    password: '',
    password2: '',
    name: '',
    phoneNumber1: '',
    phoneNumber2: '',
    email1: '',
    email2: '',
    companyNum: '',
    storeName: '',
  });

이렇게 inputs에 각각 input이름을 넣은 객체로 state를 초기화 하고

 

  const {
    userName,
    password,
    password2,
    name,
    phoneNumber1,
    phoneNumber2,
    email1,
    email2,
    companyNum,
    storeName,
  } = inputs;

비구조화 할당을 통해 값을 추출한다.

 function handleInput(e) {
    const { value, name } = e.target;
    setInputs({
      ...inputs,
      [name]: value,
    });
  }

그리고 handleInput 함수는 input 값이 바뀔 때 마다 state값을 변경해주는 함수이다.

 

나머지 페이지들도 이런 방식으로 돌아간다. 이제 이걸 따로 Hook으로 빼주자!

 

import { useState } from 'react';

export default function useInputs(initalForm) {
  const [inputs, setInputs] = useState(initalForm);

  function onChange(e) {
    const { value, name } = e.target;
    setInputs({
      ...inputs,
      [name]: value,
    });
  }
  return [inputs, onChange];
}

이렇게 빼줬는데 이제 이 걸 사용해주자!

import useInputs from '../hooks/useInputs';


  const [
    {
      userName,
      password,
      password2,
      name,
      phoneNumber1,
      phoneNumber2,
      email1,
      email2,
      companyNum,
      storeName,
    },
    onChange,
  ] = useInputs({
    userName: '',
    password: '',
    password2: '',
    name: '',
    phoneNumber1: '',
    phoneNumber2: '',
    email1: '',
    email2: '',
    companyNum: '',
    storeName: '',
  });

나는 return 값으로 inputs와 onChage 함수를 줬다.

 

inputs 부분에 userName, ... 등등 하여 비구조화 할당을 해주고,

useInput(여기엔 초기 값을 세팅 해준다.)

 

전이랑 똑같이 값은 비구조화 할당으로 값을 추출한 것으로 가져다 쓰면 되고, onChange 함수로 값이 바뀔 때 마다 값을 할당해준다.

 

나머지도 이와 마찬가지로 나눠야지!

 

그렇게 하니 반복되는 코드를 50  ~ 60줄 정도 줄였다!

반복되는게 더 있는 것 같은데 찾아서 hook으로 빼줘야겠다...!

 

📍틀린 부분이 있다면 말해주세요!

 

참고

https://www.w3schools.com/react/react_customhooks.asp
https://react.vlpt.us/basic/21-custom-hook.html