TIL 23.03.23

오늘은 Custom Hooks에 대해서 공부했다.

 

Custom Hooks란?

개발자가 스스로 커스텀한 훅을 의미하며 이를 이용해 반복되는 로직을 함수로 뽑아내어 

재사용 가능하게 만드는 것을 의미한다.

 

즉, 반복되는 로직을 하나로 묶어 재사용하기 위함이다

 

여러 url을 fetch 하는 경우 동일한 로직으로 작동되며 상태 변경을 반복되는 경우가 있다.

custom hooks를 이용하면 반복되는 로직을 하나의 함수로 뽑아내어 재사용이 가능해진다.

 

custom hooks의 장점

1. 상태관리 로직의 재활용이 가능하고
2. 클래스 컴포넌트보다 적은 양의 코드로 동일한 로직을 구현할 수 있으며
3. 함수형으로 작성하기 때문에 보다 명료하다는 장점 (e.g. useSomething)

 

 

Custom Hooks 예시

 

적용 전

// Login.jsx
import React, { useState, useCallback } from "react";

// state
const [text, setText] = useState({
  email: "",
  password: ""
});

// func
const onChange = useCallback(
  e => {
    const { value, name } = e.target;
    setText({ ...text, [name]: value });
  },
  [text]
);

return (
  <>
    <input id="email" value={text.email} onChange={onChange} />
    <input id="password" value={text.password} onChange={onChange} />
  </>
);

기본적인 입력 폼에 데이터를 넣는 함수이다.

입력 폼을 쓸때마다, 위 로직을 모든 컴포넌트에 넣을 수 밖에 없는 상황이 발생하기 때문에, 위의 로직을 Hook으로 빼주었다.

 

적용 후

Hook으로 분리

// useInput
import { useState, useCallback } from "react";

export default (initalValue = null) => {
  // state 정의
  const [data, setData] = useState(initalValue);

  // 함수 정의
  const handler = useCallback(
    e => {
      const { value, name } = e.target;
      setData({
        ...data,
        [name]: value
      });
    },
    [data]
  );
  return [data, handler];
};

 

// Login.jsx
import React from "react";
import useInput from "useInput";

// state
const [text, setText] = useInput({
  email: "",
  password: ""
});

return (
  <>
    <input id="email" value={text.email} onChange={setText} />
    <input id="password" value={text.password} onChange={setText} />
  </>
);

useInput훅 안에 useState, useCallback에 있는 함수를 미리 정의 했기 때문에, 컴포넌트에서는 훅을 사용하기만 하면 된다.

 

 

---

출처: https://kyounghwan01.github.io/blog/React/custome-hook/#%E1%84%92%E1%85%AE%E1%86%A8%E1%84%8B%E1%85%B3%E1%86%AF-%E1%84%87%E1%85%A1%E1%86%AB%E1%84%8B%E1%85%A7%E1%86%BC%E1%84%92%E1%85%A1%E1%86%AB-%E1%84%85%E1%85%A9%E1%84%8C%E1%85%B5%E1%86%A8