Custom Hook

Custom Hook

- 반복되는 로직이나 중복되는 코드를 우리만의 Hook, 즉 Custom Hook을 통해 별도로 관리할 수 있다.

 

// 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와 eventhandler도 계속 같이 증가하고 그로인해 코드에 중복이 생기고 있다.

이제 React에서 제공하는 useState나 useEffect와 같은 내장 Hook을 사용해서 나만의 Hook을 만들려고 한다.

 

useInput 을 만들어보겠다.

useInput이라는게 원래 있는 이름이 아니라, input을 관리하는 Hook이라 내가 이름을 그렇게 지은 것 이다.

Custom Hook의 이름은 아무래도 상관없다, 다만 파일 이름 앞에 use만 붙혀주면 된다.

그래야 다른사람들이 해당 코드를 봤을 때 "아 이 파일은 Hook 역할을 하는 파일이구나" 라고 바로 알 수 있다.

 

 

Custom Hook 만들기

1. src 폴더에 hooks 폴더 생성

2. hook 폴더에 useInput.js 파일 생성

 

위 코드에서 title쪽을 보면 title이라는 값을 하나 만들고 handler를 하나 만들고 있다.

그래서 value와 handler를 각각 1개씩 반환해주는 Hook을 짰다.

const useInput = () => {

  return [value, handler]
}

export default useInput

이런식으로.

 

// useInput.js

import { useState } from 'react';

const useInput = () => {
  const [value, setValue] = useState('');
  const handler = (e) => {
    setValue(e.target.value);
  };
  return [value, handler];
};

export default useInput;

맨 상단 코드에서 title이란 값을 useState로 관리했으니 동일하게 써주고,

handler 함수도 onChangeTitleHandler 함수와 비교해보면 동일한것을 알 수 있다.

 

App.js 수정도 참 쉽다.

// src/App.jsx

import React from 'react';
import {useState} from 'react';
import useInput from './hooks/useInput';

const App = () => {
//   // input의 갯수가 늘어날때마다 state와 handler가 같이 증가한다.
//   const [title, setTitle] = useState('');
//   const onChangeTitleHandler = (e) => {
//     setTitle(e.target.value);
//   };
const [title, onChangeTitleHandler] = useInput();

  
  // // input의 갯수가 늘어날때마다 state와 handler가 같이 증가한다.
  // const [body, setBody] = useState('');
  // const onChangeBodyHandler = (e) => {
  //   setBody(e.target.value);
  // };
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>
  );
};

저 4줄짜리 코드가 1줄로 축약되는 것을 볼 수 있다.

Custom Hook은 이렇게 사용한다.