React - ( React Hooks 6 - Custom Hooks )

01. Custom hook이란?

(1) input 개수만큼 늘어나는 useState, event handler 들

// src/App.jsx

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

const App = () => {
	// input의 갯수가 늘어날때마다 state와 handler가 같이 증가한다.
  const [title, setTitle] = useState("");
  const onChangeTitleHandler = (e) => {
    setTitle(e.target.value);
  };

	// input의 갯수가 늘어날때마다 state와 handler가 같이 증가한다.
  const [body, setBody] = useState("");
  const onChangeBodyHandler = (e) => {
    setBody(e.target.value);
  };

  return (
    <div>
      <input
        type="text"
        name="title"
        value={title}
        onChange={onChangeTitleHandler}
      />
      <input
        type="text"
        name="title"
        value={body}
        onChange={onChangeBodyHandler}
      />
    </div>
  );
};

export default App;

 

위의 코드는 input을 구현하고 useState로 각 input의 value를 관리하는 아주 친숙한 코드입니다. 좋은 코드이지만, 조금 아쉬운 부분은 input의 개수가 증가하면 useState와 이벤트핸들러도 같이 증가하고 그로 인해 코드의 중복이 생긴다는 점입니다.

 

지금은 input이 단지 2개이기때문에 복잡해 보이지 않으나 만약 input이 수십개가 되면 중복코드가 점점 더 많이 발생하게 됩니다.

 

리액트에서는 위 예시처럼 반복되는 로직이나 중복되는 코드를 우리만의 훅, 즉 커스텀 훅을 통해서 관리할 수 있습니다. 리액트에서 제공하는 useState, useEffect와 같은 내장 훅을 사용해서 우리만의 훅을 만드는 것이죠.

 

(2) custom hook → useInput

input을 관리하는 훅을 만들어보겠습니다.

 

📌네이밍과 관련해서는 이렇게 정리하기

• 커스텀 훅의 함수 이름은 use로 시작하는 것이 좋습니다 (예: useInput).
• 파일 이름은 use로 시작할 필요는 없으며, 원하는 대로 지정할 수 있습니다.

많은 개발자들이 src 폴더에 hooks라는 폴더를 생성하여 커스텀 훅들을 보관하는 방식으로 디렉토리 구조를 설계합니다.

 

(3) 코드 구현하기

// src/hooks/useInput.js

import React, { useState } from "react";

const useInput = () => {
	// 2. value는 useState로 관리하고, 
  const [value, setValue] = useState("");

	// 3. 핸들러 로직도 구현합니다.
  const handler = (e) => {
    setValue(e.target.value);
  };

	// 1. 이 훅은 [ ] 을 반환하는데, 첫번째는 value, 두번째는 핸들러를 반환합니다.
  return [value, handler];
};

export default useInput;

 

✨커스텀훅이란, 우리가 컴포넌트에서 구현해왔던 useState와 핸들러를 이렇게 뽑아서 따로 빼놓은 것 함수인 것입니다.

 

위에서 만든 커스텀 훅을 사용하는 코드는 아래와 같습니다.

 

// src/App.jsx

import React from "react";
import useInput from "./hooks/useInput";

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

  return (
    <div>
      <input
        type="text"
        name="title"
        value={title}
        onChange={onChangeTitleHandler}
      />

      <input
        type="text"
        name="title"
        value={body}
        onChange={onChangeBodyHandler}
      />
    </div>
  );
};

export default App;

 

커스텀 훅을 만들기 전과 기능은 동일하지만 중복코드가 사라지고 전체적인 코드의 양도 감소했습니다,