커스텀 Hooks_React

커스텀 Hooks

• 컴포넌트를 만들다보면, 반복되는 로직이 자주 발생한다.
• 예를 들어서 input 을 관리하는 코드는 관리 할 때마다 꽤나 비슷한 코드가 반복된다.
• 그러한 상황에 커스텀 Hooks 를 만들어 반복되는 로직을 쉽게 재사용할 수 있다.
• 커스텀 Hooks 를 만들 때에는 보통 use 라는 키워드로 시작하는 파일을 만들고 그 안에 함수를 작성한다
• 만드는 방법은 굉장히 간단하다. 그냥, 그 안에서 useState, useEffect, useReducer, useCallback 등 Hooks 를 사용하여 원하는 기능을 구현해주고, 컴포넌트에서 사용하고 싶은 값들을 반환해주면 된다.

useState 사용

import { useState, useCallback } from 'react';

const useInputs = initialForm => {
  const [form, setForm] = useState(initialForm);
  //change
  const onChange = useCallback(e => {
    const { name, value } = e.target;
    setForm(form => ({ ...form, [name]: value }));
  }, []);

  const reset = useCallback(() => setForm(initialForm), [initialForm]);
  return [form, onChange, reset];
};

export default useInputs;

useReducer 사용

import { useState, useCallback, useReducer } from 'react';

const initial = {
  form: '',
};

const reducer = (state, action) => {
  switch (action.type) {
    case 'CHANGE_USER':
      return {
        ...state,
        form: {
          ...state.form,
          [action.name]: action.value,
        },
      };
    case 'RESET':
      return {
        form: initial.form,
      };

    default:
      return state;
  }
};
const useInputs = ({ initialForm }) => {
  const [state, dispatch] = useReducer(reducer, initial);

  const { form } = state;

  const onChange = useCallback(e => {
    const { name, value } = e.target;
    dispatch({
      type: 'CHANGE_USER',
      name,
      value,
    });
  }, []);

  const reset = useCallback(() => {
    dispatch({
      type: 'RESET',
    });
  }, []);

  return [form, onChange, reset];
};

export default useInputs;