[React] 커스텀 훅 만들기(Custom Hooks)

 

 

 

리액트에는 useState, useEffect 같은 내장되어 있는 훅 들이 있고,

이러한 훅들을 사용하여 나만의 로직을 만드는 경우가 자주 있습니다.

 

이럴 때 반복되는 로직들은 custom hooks로 만들어서 재사용 쉽게 만들면 좋은데

한번 간단한 예시를 통해 만들어 보겠습니다.

 

| 예시

공식 문서에 따르면 커스텀 훅을 만들 때는 앞에 use라는 키워드를 붙여서 만들라고 해서

저도 use키워드를 붙여서 만들어 보겠습니다.

1. useInput

input이 바뀔 때 입력값들을 useState를 통해 state로 저장하고

그 값을 input value로 보여주는 코드를 일반적으로 작성하려면 

import { useState } from "react";
import { useInput } from "./hooks/useInput";
import "./App.css";

function App() {
  const [nameInput, setNameInput] = useState("");
  const [cityInput, setCityInput] = useState("");

  const handleNameInput = (e) => {
    setNameInput(e.target.value);
  };

  const handleCityInput = (e) => {
    setCityInput(e.target.value);
  };

  return (
    <>
      <h1>hello~</h1>

      <div>
        <label>Name</label>
        <input type="text" value={nameInput} onChange={handleNameInput} />
      </div>
      <div>
        <label>City</label>
        <input type="text" value={cityInput} onChange={handleCityInput} />
      </div>

      <h3>
        <div>name: {nameInput}</div>
        <div>city: {cityInput}</div>
      </h3>
    </>
  );
}

export default App;

 

이런 식으로 코드를 작성하면 각각 name과 city가 state로 잘 저장되고, 화면에 보여주게 됩니다.

근데 input의 개수가 늘어나면 그에 따라 useState와 함수를 계속 만들어 줘야 하는 단점이 있습니다.

이럴 때 커스텀 훅을 만들어서 사용하면 좋습니다.

먼저 useInput이라는 파일을 만들고 아래와 같이 코드를 작성하면 됩니다.

import { useState } from "react";

export const useInput = (initialValue) => {
  const [value, setValue] = useState(initialValue);

  const handleChange = (e) => {
    setValue(e.target.value);
  };

  return {
    value: value,
    onChange: handleChange,
  };
};

useInput을 value값과 hadleChange함수를 가지고 있는 객체를 리턴하도록 만들었습니다.

이제 아래 코드처럼 컴포넌트에서 import해온다음 사용하면 됩니다.

import { useInput } from "./hooks/useInput";
import "./App.css";

function App() {
  const name = useInput("");
  const city = useInput("");

  return (
    <>
      <h1>hello~</h1>

      <div>
        <label>Name</label>
        <input type="text" {...name} />
      </div>
      <div>
        <label>City</label>
        <input type="text" {...city} />
      </div>

      <h3>
        <div>name: {name.value}</div>
        <div>city: {city.value}</div>
      </h3>
    </>
  );
}

export default App;

2. useModal

useState로 상태를 통해 모달창을 보여주는 로직도 커스텀 훅을 통해 만들 수 있습니다.

 

먼저 useModal이라는 파일을 만들어 주고 아래 코드처럼 modal을 관리하는 로직을 작성해 주면 됩니다.

import { useState } from "react";

export const useModal = () => {
  const [modal, setModal] = useState(false);

  const handleModal = () => {
    setModal(!modal);
  };

  return [modal, handleModal];
};

그리고 컴포넌트에서 import해와서 사용하면 됩니다.

import { useModal } from "./hooks/useModal";
import "./App.css";

function App() {
  const [modal, handleModal] = useModal();

  return (
    <>
      <h1>hello~</h1>
      <button onClick={handleModal}>클릭!</button>
      {modal ? <Modal handleModal={handleModal} /> : null}
    </>
  );
}

const Modal = ({ handleModal }) => {
  return (
    <div className="modal-wrap">
      <div className="modal">
        <button onClick={handleModal}>닫기</button>
      </div>
    </div>
  );
};

export default App;

 

 

이처럼 다양하게 방식으로 custom hooks를 활용할 수 있고,

잘 활용하면 깔끔하게 코드작성하는데 도움이 될 거 같습니다.