React Custom Hook

먼저 React Hook에 대해 정리하겠습니다. CustomHook에 대해서만 궁금하다면 아래로 가주세요.

Hook은 React를 개발하다 보면 자주들을 수 있는 단어입니다.
처음에는 공식문서등의 Hook에 대한 설명이 와닿지 않아, 정확한 개념은 알지 못하고 넘어가기 일쑤였는데요..

최근에 회사에서 프론트엔드 개발을 맡게 되어, 개념적인 부분을 보다 확실하게 알고 넘어가고자하여 알아보게되었습니다.

## React Hook과 그 등장 배경

React Hook은 함수형 컴포넌트에서도 상태 관리 및 생명주기 관련 기능을 사용할 수 있도록 React 16.8에서 도입된 새로운 API입니다. 기존에는 클래스형 컴포넌트에서만 사용할 수 있었던 상태 관리 기능을 함수형 컴포넌트에서도 활용할 수 있게 되었습니다.

Hook의 주요 기능

useState: 함수형 컴포넌트에서 상태를 관리.

useEffect: 생명주기 메서드(componentDidMount, componentDidUpdate, componentWillUnmount)를 대체.

useContext: 전역 상태를 쉽게 접근 가능.

Custom Hook: 공통 로직을 캡슐화하고 재사용 가능하게 만드는 기능.

등장 배경

클래스형 컴포넌트의 복잡성

클래스형 컴포넌트는 상태와 생명주기를 사용하기 위해 this를 이해하고, 바인딩 문제를 해결해야 했습니다.
컴포넌트가 커질수록 상태와 생명주기 메서드가 복잡하게 얽히는 문제가 있었습니다.

코드 재사용성 부족

상태 관련 로직을 재사용하려면 HOC(Higher Order Component)나 Render Props 패턴을 사용해야 했는데, 코드가 복잡해지고 가독성이 떨어졌습니다.

함수형 컴포넌트의 한계

Hook 이전에는 함수형 컴포넌트에서 상태 관리나 생명주기 관련 기능을 사용할 수 없었습니다.
간단한 UI만 처리할 수 있었기 때문에, 상태 관리를 해야 할 경우 클래스형 컴포넌트를 써야 했습니다.

Hook의 장점

간결한 문법

함수형 컴포넌트만으로 상태 관리와 생명주기 작업을 처리할 수 있어 코드가 간결해집니다.

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

useEffect(() => {
  console.log(`Count: ${count}`);
}, [count]);

상태 관리와 로직 분리

Custom Hook으로 상태 관리 로직을 컴포넌트 외부로 추출하여 재사용성과 가독성을 높입니다.

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

클래스보다 직관적

this 바인딩 문제를 피할 수 있습니다.

직관적인 함수 호출로 컴포넌트 로직을 쉽게 이해할 수 있습니다.

모던 React 생태계와 통합

Redux, Apollo 등 대부분의 최신 React 라이브러리는 Hook 기반의 API를 제공합니다.

React Hook의 핵심 철학

로직 재사용을 쉽게 하자

Custom Hook으로 상태 관리 로직을 분리하고 여러 컴포넌트에서 재사용 가능.

React의 본질을 유지하자

함수형 컴포넌트의 심플한 특성을 유지하면서도 강력한 기능을 제공합니다.

컴포넌트와 상태를 직관적으로 연결하자

상태와 관련된 로직을 컴포넌트와 가까운 위치에서 정의.

Custom Hook의 정의

Custom Hook은 React의 Hook을 사용해 만든 재사용 가능한 함수입니다.

함수 자체는 일반 함수와 비슷하지만, React의 state, effect, 또는 context 등을 조작하거나 React 컴포넌트와 밀접하게 연관된 로직을 캡슐화합니다.

예를 들어:

function useCustomLogic() {
  const [value, setValue] = useState(0); // Hook 사용
  useEffect(() => {
    console.log(`Value updated: ${value}`);
  }, [value]);

  const increment = () => setValue((prev) => prev + 1);

  return { value, increment };
}

Custom Hook과 일반 함수의 차이

특징	Custom Hook	일반 함수
React Hook 사용	React의 useState, useEffect 같은 Hook을 내부에서 사용함	React와 무관, 단순한 연산이나 작업 수행 가능
React 규칙 준수	"Hook은 반드시 컴포넌트 혹은 다른 Hook 안에서 호출되어야 함" 같은 규칙을 따름	React와 독립적, 규칙 필요 없음
상태 관리	상태와 사이드 이펙트 관리 가능 (useState, useReducer 등)	상태를 다루지 않음
의존성	React의 렌더링 사이클과 연관	단순히 외부 값과의 연관성만 있음
주요 목적	React 컴포넌트 간 재사용 가능한 로직 캡슐화	특정 로직을 일반적으로 캡슐화

왜 "Custom Hook"이라는 이름이 붙었을까?

React에서 제공하는 Built-in Hook(예: useState, useEffect, useReducer)과 같은 구조와 규칙을 따르기 때문에 "사용자 정의(Custom)" 라는 의미가 붙은 것입니다.

React Hook의 주요 규칙:

Hook은 컴포넌트나 다른 Hook 안에서만 호출 가능

Custom Hook도 이 규칙을 따릅니다. 일반 함수는 이런 제한이 없습니다.

use로 시작해야 함

이건 React 개발자 도구에서 Custom Hook을 쉽게 식별하고 디버깅하기 위함입니다.

Custom Hook의 장점

재사용성: 여러 컴포넌트에서 공통으로 사용하는 로직을 하나의 Hook으로 추출합니다.

가독성: 컴포넌트가 복잡한 로직을 내부에 포함하지 않도록 정리합니다.

테스트 가능성: Custom Hook을 분리하면 특정 로직에 대해 독립적으로 테스트하기 쉬워집니다.

React 컨텍스트 활용: Hook 안에서 useContext를 사용해 상태 공유가 가능합니다.

일반 함수와 Custom Hook 비교 예제

일반 함수

function calculateSum(a: number, b: number): number {
  return a + b; // 단순한 계산
}

// 사용
const sum = calculateSum(1, 2);

Custom Hook

function useCounter(initialValue: number) {
  const [count, setCount] = useState(initialValue);

  const increment = () => setCount((prev) => prev + 1);
  const decrement = () => setCount((prev) => prev - 1);

  return { count, increment, decrement };
}

// 사용
const { count, increment, decrement } = useCounter(0);

Custom Hook은 React 상태 관리와 관련된 로직을 캡슐화하고 컴포넌트 간 재사용성을 제공합니다.

일반 함수와는 이 부분에서 목적과 구조가 다릅니다.

결론

Custom Hook은 React Hook의 규칙을 따르는, React 생태계에 맞춘 재사용 가능한 함수입니다.

단순히 외부에 함수를 두는 것과 다르게, React 상태 관리와 생명 주기를 활용한 로직을 재사용 가능하게 만들어 준다는 점이 핵심입니다.