1. 커스텀 훅이란

React에서 커스텀 훅(custom hook)은 기본적으로 React 기능(상태 관리, 라이프사이클 이벤트 등)을 재사용하기 위한 메커니즘을 제공하는 함수다. 커스텀 훅은 React의 내장 훅(hooks)을 기반으로 하여 만들어지며, 로직을 모듈화하고 다양한 컴포넌트 간에 공유할 수 있도록 도와준다. 따라서 예전보다 React의 VAC 디자인 패턴을 사용도 적어졌다.

2. 커스텀 훅 정의

1. 함수 이름은 'use'로 시작: React는 'use'로 시작하는 함수를 훅으로 간주한다. 이 규칙을 따르는 것은 React의 훅 사용 규칙을 준수하는 데 중요하다.
2. React의 기본 훅을 사용할 수 있음: 커스텀 훅 내에서는 useState, useEffect, **useContext**와 같은 React의 기본 훅을 사용하여 상태 관리, 사이드 이펙트 처리 등을 할 수 있다.
3. 재사용 가능한 로직: 커스텀 훅은 특정 로직을 여러 컴포넌트에서 재사용할 수 있도록 도와준다. 예를 들어, 데이터 가져오기, 입력값 검증, 이벤트 리스너 관리 등의 로직을 커스텀 훅으로 만들어 여러 곳에서 사용할 수 있다.
4. UI를 직접 렌더링하지 않음: 커스텀 훅은 UI를 직접 렌더링하지 않는다. 대신, 상태값이나 함수 등을 반환하여 컴포넌트에서 이를 사용할 수 있게 한다.
5. 컴포넌트 간의 상태 공유: 커스텀 훅을 통해 여러 컴포넌트 간에 상태를 공유하거나 로직을 쉽게 공유할 수 있다.

eg.

// 커스텀 훅

function useCustomHook() {
  const [state, setState] = useState(initialState);

  // 여기에 로직 추가

  return [state, someFunction];
}

// UI를 그리는 다른 컴포넌트

import React from 'react';
import { useCustomHook } from './path/to/useCustomHook';

function MyComponent() {
  const [state, someFunction] = useCustomHook();

  // 이제 state 값을 이 컴포넌트에서 사용할 수 있음

  return (
    <div>
      {/* state 값을 UI에 표시하거나 다른 방식으로 사용 */}
      {state}
    </div>
  );
}

3. 커스텀 훅 특징

React의 Custom Hook은 단순히 “Hook 로직을 재사용하기 위한 함수”이며, 각 컴포넌트가 이 Custom Hook을 호출할 때마다 별도의 상태를 갖게 된다. 즉, 동일한 Custom Hook을 여러 컴포넌트에서 사용하더라도, 각 컴포넌트마다 상태가 독립적으로 관리되며 공유되지 않는다.