2월 26일 여정 49일차이다.

오늘은 Custom hook이라는 것에 대해 간단하게 기록하려고 한다.

오늘의 Today I Learned

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와 이벤트핸들러도 같이 증가하고 그로 인해 코드의 중복이 생긴다는 점이다. 리액트에서 제공하는 useState, useEffect와 같은 내장 훅을 사용해서 훅을 만드는 것이다.

// src/hooks/useInput.js

import React, { useState } from "react";

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

	// 3. 핸들러 로직도 구현합니다.
  const handler = (e) => {
    setValue(e.target.value);
  };

	// 1. 이 훅은 [ ] 을 반환하는데, 첫번째는 value, 두번째는 핸들러를 반환합니다.
  return [value, handler];
};

export default useInput;

이렇게 custom hook을 사용하여 만들어 보았다. 이렇게 만들경우, 파일에 이름 앞에는 반드시 'use'라는 키워드가 들어가야한다.

마지막으로

custom hook을 만들어보는 연습을 해야 될 것 같다.