React - custom hook

목차

• Introduction
• custom hook
• Conclusion

📌 Introduction

안녕하세요. 오늘은 custom hook에 대해서 알아보겠습니다. custom hook은 자주 사용되는 react hooks를 묶어서 dry함을 유지하기 위해 사용이 됩니다. 그럼 한번 알아볼까요?

📌 custom hook

import { useReducer, useCallback } from "react";

const CHANGE_FORM = "CHANGE_FORM";
const RESET_FORM = "RESET_FORM";

function reducer(state, action) {
  switch (action.type) {
    case CHANGE_FORM:
      return {
        ...state,
        [action.name]: action.value,
      };
    case RESET_FORM:
      return {
        ...action.initialForm,
      };
    default:
      return state;
  }
}

function useInputs(initialForm) {
  const [form, dispatch] = useReducer(reducer, initialForm);

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

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

  return [form, onChange, reset];
}

export default useInputs;

이렇게 자주 사용되는 inputs에 대해서 custom hooks를 만들어 줄수 있습니다.
이제 useInputs는 이렇게 사용이 가능합니다.

 const [form, onChange, reset] = useInputs({
    username: "",
    email: "",
  });

custom hooks를 사용할때는 앞에 use를 붙여 hooks인 것을 알려줍니다.

📌 Conclusion

이렇게 오늘 custom hook을 만드는 방법에 대해서 알아보았습니다. 왜 vue3에서 hook에 영감을 많이 받았다고 했는지 알겠네요. 좀더 dry하게 코드를 유지를 할 수 있는 장점이 너무 크게 다가오네요. 그럼 다음 포스팅에서 봐요 안녕~