[React] custom hooks

custom hooks

리액트 훅을 이용해서 공통된 로직이나 기능을 별도로 분리한 훅으로, 앞에 use 가 붙는다.

 

아래와 같이 input 의 갯수가 늘어날 때마다 state 와 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;

 

hooks 폴더 생성 (커스텀 훅을 보관)> useInput.js 생성

 

import { useState } from "react";

const useInput = () => {
  //state : value 는 useState 로 관리
  const [value, setValue] = useState("");

  // handler 
  const handler = (e) => {
    setValue(e.targert.value);
  };
  // 이 훅은 배열을 반환하고 첫번째는 value, 두번째는 handler 를 반환
  return [value, handler];
};

export default useInput;

 

이 커스텀 훅을 적용하면, 다음과 같이 식이 간단해진다.

 

import "./App.css";
import useInput from "./hooks/useinput";

function App() {
  const [name, NameHandler] = useInput();
  const [password, passwordHandler] = useInput();
  return (
    <div>
      <input value={name} onChange={NameHandler} />
      <input value={password} onChange={passwordHandler} />
    </div>
  );
}

export default App;