Custom Hooks

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

리액트 훅을 이용해서 공통된 로직이나 기능을 별도로 분리한 훅을 말함❗

 

보통 src 폴더에 hooks 라는 폴더를 생성해서 커스텀 훅들을 보관.

커스텀 훅을 만들때 이름은 내 마음대로 해도 상관이 없으나,

파일의 이름 앞에 use 라는 키워드를 붙여줘야 함.

 

(src/hooks/useInput.js)

import { useState } from 'react';

const useInput = () => {
    // 2. value는 useState로 관리하고, 
    // state
    const [value, setValue] = useState('');

    // 3. 핸들러 로직도 구현합니다.
    // handler
    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 [name, onChangeNameHandler] = useInput();
  const [password, onChangePasswordHandler] = useInput();

  return (
    <div>
      <input
        type="text"
        name="title"
        value={name}
        onChange={onChangeNameHandler}
      />

      <input
        type="text"
        name="title"
        value={password}
        onChange={onChangePasswordHandler}
      />
    </div>
  );
};

export default App;