[React Hooks 총정리] Custom Hooks

Custom Hook

• 원하는대로 커스텀해서 만드는 React Hook

Custom Hook 만드는 방법

1. 원하는 이름을 지어주기
2. 원하는 기능을 함수안에 구현하기
3. 매개변수, return값도 마음대로 정할 수 있음

• Custuom Hook 내부에서 다른 React Hook을 사용할 수 있음

• 사용하는 컴포넌트마다 커스텀 훅이 가지는 State와 Effect는 완전히 독립적이기 때문에 Custuom Hook은 폭발적인 재사용성을 제공함

function useCounter(initialCount = 0) {
  const [count, setCount] = useState(initialCount);
  
  const increment = () => setCount(c => c + 1);
  const decrement = () => setCount(c => c - 1);
  
  return { count, increment, decrement };
}

function CounterA() {
  const { count, increment } = useCounter(0);
  return <button onClick={increment}>A: {count}</button>;
}

function CounterB() {
  const { count, increment } = useCounter(10);
  return <button onClick={increment}>B: {count}</button>;
}

• 여기서 CounterA와 CounterB는 동일한 useCounter 훅을 사용하지만, 각각의 상태와 로직은 완전히 독립적임

• CounterA의 버튼을 클릭해도 CounterB의 카운트에는 영향을 주지 않음

• 이러한 독립성 덕분에 커스텀 훅은 다양한 상황에서 재사용 될 수 있음

• 다른 초기값으로 시작하는 여러 카운터,
  증가/감소 로직이 필요한 다양한 UI 요소 (예: 수량 선택기, 페이지네이션 등),
  카운트 기반의 애니메이션이나 타이머 등

---

실전 코드 작성 : useInput Custom Hook 만들기

UseInputCustomHook

import { useState } from "react";

function UseInputCustomHook() {
  const [inputValue, setInputValue] = useState("");

  const handleChange = (e) => {
    setInputValue(e.target.value);
  };

  const handleSubmit = () => {
    alert(inputValue);
    setInputValue("");
  };

  return (
    <div>
      <h1> useInput</h1>
      <input value={inputValue} onChange={handleChange}></input>
      <button>확인</button>
    </div>
  );
}

export default UseInputCustomHook;

• 만약 여러개의 컴포넌트들이 존재하고,
  컴포넌트 마다 input값을 처리해줘야 한다면 중복코드 발생 가능성과 코드의 복잡성이 높아짐
  - 해결방법 : input을 처리하는 기능을 담은 Custum Hook을 만들자!

useInput.js

• 커스텀 훅 이름은 자유롭게 설정해도 되지만
  앞에 꼭 use가 들어가야 함
  (실수할 경우 React 자체에서 console에 경고메세지 띄워줌)

UseInputCustomHook.js 코드 수정

구현 화면

• useInput이라는 Custom Hook 안에 input을 처리하는 기능을 숨겨주었기 때문에 useInput Hook이 반환해주는 inputValue와 handleChange만 input 태그의 속성으로 넣어주기만 하면됨

만약 input을 하나 더 생성하고 싶다면?

• 이렇게 추가해주면 됨

---

useInput Hook에 handleSubmit 기능 추가하기

UseInputCustomHook

useInput

구현 화면

---

Custom Hook의 재사용성이 뛰어난 이유

• 커스텀 훅이 가지고 있는 state와 effect는 커스텀 훅을 사용하는 컴포넌트마다 독립적임

• 한 컴포넌트에 독립적인 Hook을 여러번 사용해도 독립적인 state와 effect가 여러개 생성이 됨

• 위의 실습에서도 input을 반복해서 사용해도 각 input이 독립적인 state를 가짐