내일배움캠프 React트랙 51일차 회고 (2022.01.10)

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

 

우리가 처음으로 만들 커스텀훅은 useInput 이라는 것이다. input을 관리하는 훅이니까 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;

 

 

// 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 라는 키워드가 들어가야 한다.