[React] 커스텀 훅 만들기

목차

React에서 커스텀 훅 만들기: 효율적인 상태 관리와 로직 재사용 🔄🎣

안녕하세요, 현대 웹 개발에 몰두하는 여러분! React의 훅은 컴포넌트 간에 상태와 로직을 재사용할 수 있는 훌륭한 방법을 제공합니다. 오늘은 여러분이 자주 사용하는 패턴이나 로직을 커스텀 훅으로 어떻게 추출할 수 있는지, 그리고 이를 통해 애플리케이션의 유지보수성과 가독성을 어떻게 향상시킬 수 있는지 알아보겠습니다.

---

커스텀 훅이란?

커스텀 훅은 React의 내장 훅(useState, useEffect, useContext 등)을 사용하여 만든, 재사용 가능한 훅 함수입니다. 이를 통해 컴포넌트 로직을 모듈화하여 여러 컴포넌트에서 쉽게 사용할 수 있습니다.

 

커스텀 훅 만들기의 이점

• 로직의 재사용: 중복 코드를 줄이고, 로직을 공유하여 프로젝트의 일관성을 유지할 수 있습니다.
• 분리된 관심사: UI 로직과 비즈니스 로직을 분리하여 각각의 코드 유지보수를 간소화합니다.
• 코드의 간결성: 컴포넌트를 더 작고 관리하기 쉬운 단위로 나눌 수 있습니다.

 

기본적인 커스텀 훅 만들기 예시

useCounter 훅 만들기

다음은 간단한 카운터 로직을 커스텀 훅으로 만드는 과정입니다. 이 훅은 useState를 사용하여 카운터의 현재 값을 관리하고, 값을 증가 및 감소시키는 함수를 제공합니다.

import { useState } from 'react';

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

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);
  const reset = () => setCount(initialValue);

  return { count, increment, decrement, reset };
}

커스텀 훅 사용하기

커스텀 훅 useCounter를 사용하는 컴포넌트 예제입니다.

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

function CounterComponent() {
  const { count, increment, decrement, reset } = useCounter(10);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
}

 

고급 커스텀 훅 만들기 팁

• 유닛 테스팅: 커스텀 훅을 테스트하여, 예상대로 작동하는지 확인합니다.
• 의존성 최소화: 훅이 외부 상태에 의존하지 않도록 설계하여, 더 넓은 범위의 컴포넌트에서 사용할 수 있도록 합니다.
• 문서화: 훅의 사용 방법과 매개변수, 반환값을 명확히 문서화하여, 다른 개발자가 쉽게 이해하고 사용할 수 있도록 합니다.

 

마무리하며...

커스텀 훅은 React 애플리케이션을 더욱 모듈화하고 재사용 가능하게 만들어 줍니다. 복잡하거나 반복되는 로직을 커스텀 훅으로 추출함으로써, 코드의 가독성과 유지보수성을 크게 향상시킬 수 있습니다. 여러분의 프로젝트에서도 이러한 기법들을 활용하여 효율적인 개발 프로세스를 경험해 보세요!

---

Reference:

Introducing Hooks – React

 

Building Your Own Hooks – React