Custom Hook

Hook의 세트가 반복적으로 수행된다면 커스텀훅으로 중복을 제거

컴포넌트를 생성하다보면, 동일한 로직이 반복되는 상황이 자주 발생한다.

이 때 Custom Hook을 사용하면 반복되는 훅을 커스텀한 뒤 따로 분리하여 컴포넌트에 중복 되어있는 로직을 제거한다.

Custom Hook 사용방법

LoginForm, SignupForm 컴포넌트에는 아래와 같이 동일한 작업형태가 반복된다.

import React, { useState, useCallback } from "react";

const LoginForm = () => {
  // 아래의 로직이 반복
  const [id, setId] = useState('');
  const onChangeId = useCallback((e) => {
    setId(e.target.value);
  }, []);

  return (
    <>
      <label htmlFor="user-id">아이디</label>        
      <input name="user-id" value={id} onChange={onChangeId} required />
    </>
  );
};

export default LoginForm;

import React, { useState, useCallback } from "react";

const SignupForm = () => {
  // 아래의 로직이 반복
  const [id, setId] = useState('');
  const onChangeId = useCallback((e) => {
    setId(e.target.value);
  }, []);

  return (
    <>
      <label htmlFor="user-id">아이디</label>        
      <input name="user-id" value={id} onChange={onChangeId} required />
    </>
  );
};

export default SignupForm;

위의 반복되는 로직을 Custom Hook으로 변경하기 위해 프로젝트에 hooks 폴더를 생성한다.

이 후 생성된 hooks 폴더에서 아래와 같이 Custom Hook을 작성한다.

작성시에는 반복되는 코드의 변수명을 범용적으로 사용할 수 있게 기존 변수명을 변경하여 아래와 같이 작성한다.

// hooks폴더의 커스텀 훅 파일
import { useState, useCallback } from 'react';

export default (initialValue = null) => {
  const [value, setValue] = useState(initialValue);
  const handler = useCallback((e) => {
    setValue(e.target.value);
  }, []);
  return [value, handler];
}

//  const [id, setId] = useState('');
//    const onChangeId = useCallback((e) => {
//      setId(e.target.value);
//    }, []);

// 반복되는 로직을 커스텀 훅으로 대체
const [id, onChangeId] = useInput('');
const [password, onChangePassword] = useInput('');

참고 자료

React 공식문서
웹 게임을 만들며 배우는 React - 제로초