[항해 33일차] TIL_React 심화주차: Custom Hooks

학습목표

1. Custom hook 의 개념과 필요성에 대해 이해합니다.
2. 직접 구현해보며 원리와 사용방법을 체득합니다.

 

Custom hook 이란?

커스텀 훅이란, useState 와 useEffect 들과 같이, 특정 상태관리나 라이프사이클 로직들을 추상화하여 묶어서 재사용이 가능하도록 제작이 가능한 함수를 뜻합니다.

input 갯수만큼 늘어나는 useState, event handler 들

src/App.js

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 와 같은 내장 훅을 사용해서 사용자만의 훅을 만드는 거죠.

 

첫 custom hook → useInput

처음으로 만든 커스텀 훅은 useInput 이라는 커스텀 훅입니다 input 을 관리하는 훅이니까 useInput 이라고 이름을 지은 것뿐이비다. 커스텀 훅을 만들 때 이름은 사용자 마음대로 해도 상관이 없으나, 파일의 이름 앞에 'use' 라는 키워드를 붙여줘야 합니다.

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

 

코드 구현하기

hooks 폴더에 useInput 이라는 파일을 생성하고, 아래 코드를 한 줄씩 분석하면서 입력했습니다.

 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;

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

 

정리해서

• 커스텀 훅이란, 리액트 훅을 이용해서 공통된 로직이나 기능을 별도로 분리한 훅을 말합니다.
• 파일의 이름 앞에 반드시 use 라는 키워드가 들어가야 합니다.