TIL - 깔끔한 코딩을 위한 커스텀훅 활용예시 React Custom Hook

리액트에서는 반복되는 로직이나 중복되는 코드를 우리만의 훅, 즉 커스텀 훅을 통해서 관리할 수 있다.

커스텀 훅을 만들때 이름은 내 마음대로 해도 상관이 없으나, 단! 파일의 이름 앞에 "use"라는 키워드를 붙여줘야 한다!

 

Problem

---

Input 영역이 많아서 코드가 길어지고 있다. useInput 적용해줄 부분은 아래와 같다.

// As Is

const Write = () => {
  const navigate = useNavigate();
  
  const [title, setTitle] = useState("");
  const [contents, setContents] = useState("");
 
  {...}
  
        <div>
          Data Title:
          <input
            type="text"
            value={title}
            onChange={(e) => {
               setTitle(e.target.value);
            }}
          />
        </div>
        <div>
          Contents Summary:
          <input
            type="text"
            value={contents}
            onChange={(e) => {
               setContents(e.target.value);
            }}
          />
        </div>
        
  {...}

 

Solve

---

1. useInput이라는파일과 훅을 만들고 export 해준다.
2. 필요한 곳에 import 해주고 아래와 같이 적용, 나머지 코드들도 중복되는 부분들은 리팩토링 해준다.

// src/hooks/useInput.js

import React, { useState } from "react";

const useInput = () => {
  // use useState to manage value
  const [value, setValue] = useState("");

  const handler = (e) => {
    setValue(e.target.value);
  };
  // when it's returned, it comes with value first and handler after.
  return [value, handler];
};

export default useInput;

import useInput from "../axios/hooks/useInput";
  
  {...}

  // useInput: using custom hook
  const [title, onChangeTitleHandler] = useInput();
  const [contents, onChangeContentsHandler] = useInput();
  
  {...}
  
  <div>
          Data Title:
          <input
            type="text"
            value={title}
            onChange={onChangeTitleHandler}
          />
        </div>
        <div>
          Contents Summary:
          <input
            type="text"
            value={contents}
            onChange={onChangeContentsHandler}
          />
        </div>
  
  {...}