커스텀 Hooks 만들기

커스텀 Hooks 만들기

→ 반복되는 로직을 쉽게 재사용

• 커스텀 Hooks를 만들 때에는 use라는 키워드로 시작하는 파일을 만들고, 그 안에 함수를 작성
• 만드는 방법: useState, useEffect, useReducer, useCallback 등 Hooks를 사용하여 원하는 기능 구현하고, 컴포넌트에서 사용하고 싶은 값들 반환
• 컴포넌트의 로직을 분리시켜 필요할 때 쉽게 재사용 가능

ex) input 관리하는 코드 커스텀 Hook 만들기

import { useState, useCallback } from "react";

function 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;

//App.js
const [{ username, email }, onChange, reset] = useInputs({
    usename: "",
    email: "",
  });

const onCreate = useCallback(() => {
    dispatch({
      type: "CREATE_USER",
      user: {
        id: nextId.current,
        username,
        email,
      },
    });
    reset();
    nextId.current += 1;
  }, [username, email, reset]);

  const onToggle = useCallback((id) => {
    dispatch({
      type: "TOGGLE_USER",
      id,
    });
  }, []);
  const onRemove = useCallback((id) => {
    dispatch({
      type: "REMOVE_USER",
      id,
    });
  }, []);

• useReducer에서 사용하는 inputs 없애고 useInputs로 대체
• 새로운 항목 추가 할 때 input 값 초기화 → 데이터 등록 후 reset() 호출