React Custom hooks

React에서는 자주 사용되는 기능을 Hook이라는 방식으로 추상화하여 재사용이 가능하도록 만들어줍니다. 이것을 Custom Hook이라고 한다.

Custom Hook은 다음과 같은 규칙을 따른다.

• use로 시작하는 이름을 사용하여 작성한다.
• 하나 이상의 다른 Hook을 사용한다.
• React 컴포넌트가 아니라 일반적인 함수이다.

이 훅은 버튼 클릭을 통해 count 상태 값을 증가시킨다.

import { useState } from 'react';

function useCount() {
  const [count, setCount] = useState(0);

  const handleIncrement = () => {
    setCount(count + 1);
  };

  return [count, handleIncrement];
}

export default useCount;

이 훅은 useState hook을 사용하여 초기값을 0으로 설정한 count 상태 변수와, handleIncrement 함수를 선언하고 있다. handleIncrement 함수는 useState hook의 setCount 함수를 호출하여 count 상태 변수를 증가시키고 있다.

useCount를 사용하여 다른 컴포넌트에서 사용을한다면

import React from 'react';
import useCount from './useCount';

function Counter() {
  const [count, handleIncrement] = useCount();

  return (
    <div>
      <p>{count}</p>
      <button onClick={handleIncrement}>Click me</button>
    </div>
  );
}

export default Counter;

이 훅의 반환 값은 배열로 되어 있으므로, 배열 구조분해 할당을 이용해 count와 handleIncrement 함수를 각각 받아와 사용한다. handleIncrement 함수는 버튼 클릭 이벤트에 연결된다.

이와 같이 커스텀 훅을 사용하면, 로직을 함수로 분리함으로써 코드 가독성과 재사용성을 높일 수 있다.