TIL : Custom Hook

Custom Hook

: 반복되는 로직 혹은 중복되는 코드를 useState, useEffect와 같은 내장 Hook을 이용하여 Custom Hook을 만들어 관리할 수 있다.

custom hook 만들기

: 커스텀 훅을 만들 때 파일 명은 자유롭게 지어도 되지만, 파일의 이름앞에 use라는 키워드를 붙여야 한다. src폴더에 hooks 폴더를 생성하여 custom hook을 보관한다.

( 원래 코드 )

// src/components/Input.jsx

const Input = () => {
  const [title, setTitle] = useState("");
  const [content, setContent] = useState("");
  const titleChangeHandler = (event) => {
    setTitle(event.target.value);
  };
  const contentChangeHandler = (event) => {
    setContent(event.target.value);
  };
};

useState와 Handler함수가 반복되는 것을 확인할 수 있다.
여기서 반복되는 useState와 Handler를 따로 빼서 custom hook을 만들어 사용할 것이다.

( hooks라는 폴더생성 후 useInput이라는 custom hook 생성 )

// src/hooks/useInput.js

import React, { useState } from "react";

const useInput = () => {
  const [value, setValue] = useState("");
  const handler = (event) => {
    setValue(event.target.value);
  };
  return [value, handler];
};

export default useInput;

useState로 value라는 state를 관리하고, 핸들러 로직도 구현하여, [ value, handler ] 을 반환하는 hook을 생성하고 export한다.

( custom hook 사용하기 )

// src/components/Input.jsx
import useInput from "./hooks/useInput";

const App = () => {
  const [title, onChangeTitleHandler] = useInput();
  const [content, onChangeBodyHandler] = useInput();
};

만들어 둔 custom hook을 import해서 반환한 배열을 선언하여 사용한다.

---

custom hook 내용을 공부한 후, 직접 프로젝트에도 적용해보려고 반복되는 코드들을 custom hook을 만들어 코드를 단축하려는 시도를 해보았다.

게시물을 추가할 때, submit이라는 이벤트가 일어나게 되고,
그 이벤트가 일어났을 때, input태그안에 내용이 없으면 해당 내용을 입력해달라는 내용의 alert창을 띄운 후 해당 input태그에 포커스되는 custom hook을 만들고 싶었다.

React Hook "useFocus" is called in function "submitHandler" that is neither a React function component nor a custom React Hook function.

하지만 돌아온 건, 위와 같은 오류메시지 였다.
hook은 submitHandler안에서 사용할 수 없다고해서 다시 공식문서를 찾아보니,

반복문, 조건문 혹은 중첩된 함수 내에서 Hook을 호출하지 마세요.
Hook을 일반적인 JavaScript 함수에서 호출하지 마세요.

라는 내용을 확인할 수 있었다.

이번 오류로 반복문, 조건문, 콜백함수 안에서 hook을 사용하지 못한다는 것을 알게 되었다.