React 커스텀 훅

리엑트를 배우기 시작하면서 많이듣게되는게 커스텀 훅입니다. 리엑트의 훅은 알고있는데 커스텀 훅도 들어서는 알고있지만 자세하게 사용법이나 어떤 역할을 하는지에 대해 알지 못하고 있어서 이번 기회에 자세히 알아보려고 합니다.

커스텀 훅이란?

커스텀 훅(Custom Hook)은 React 애플리케이션에서 사용자 정의로 만든 함수이며, React Hook을 활용하여 컴포넌트에서 특정 로직을 공유하고 재사용하기 위한 방법입니다. 커스텀 훅은 주로 상태 관리, 부수 효과 처리, 데이터 가져오기, 로직 추상화 등과 같은 작업을 모듈화하고 코드 재사용성을 높이기 위해 사용됩니다.

커스텀 훅 만들기

커스텀 훅을 만들 때, 이를 사용할 컴포넌트에서 인스턴스화해 필요한 데이터 또는 함수를 추출 하고 활용합니다.

이런 커스텀 훅에는 지켜야할 규칙들이 존재합니다. 커스텀 훅인지 React 훅인지 판별이 쉽게 하기위해 커스텀 훅에는 “use”로 시작하는것이 관례입니다.

코드로 예를들어서 설명하겠습니다.

예를 들어, 로컬 스토리지를 조작하는 커스텀 훅인 useLocalStorage을 사용하여 상태를 저장하고 가져오는 작업을 추상화할 수 있습니다.

import { useState, useEffect } from 'react';

function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    const storedValue = localStorage.getItem(key);
    return storedValue !== null ? JSON.parse(storedValue) : initialValue;
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
}

이후 위에 커스텀 훅을 컴포넌트에서 사용하는 방법입니다.

function MyComponent() {
  const [count, setCount] = useLocalStorage('count', 0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

 

어떻게하면 잘 사용할 수 있을까?

위에 처럼 사용만 하게 된다면 간단 하겠지만 우리는 간단하게 만들어 쓰기보단 클린 하고 우아하게 코드를 작성해야합니다. 여기서는 클린 코드의 개념을 바탕으로 접근 하려고합니다. 우선 그전에 2가지 정보를 이해해야 합니다.

 

선언적 프로그래밍(Declarative Programming)과 명령형 프로그래밍(Imperative Programming) 입니다. 이제 아래에서 각각의 개념을 설명하고, 각각의 프로그래밍 방식에 기반한 두 가지 커스텀 훅 예시로 설명하겠습니다.

선언적 프로그래밍(Declarative Programming):

• 무엇(What)"을 수행해야 하는지를 설명하는 방식
• 원하는 결과를 선언하고 시스템이 어떻게 그 결과를 얻을지에 대한 로직을 추상화
• 주로 함수형 프로그래밍과 관련
• 코드를 간결하고 읽기 쉽게 만들어 유지보수와 이해가 쉽게 됨

선언적 프로그래밍 예시 (커스텀 훅: useFilter):

import { useMemo } from 'react';

// 선언적 프로그래밍 방식으로 필터링을 수행하는 커스텀 훅
function useFilter(data, filterFunction) {
  return useMemo(() => data.filter(filterFunction), [data, filterFunction]);
}

// 사용 예시
function FilteredItems({ items }) {
  const filteredItems = useFilter(items, (item) => item.price < 50);

  return (
    <ul>
      {filteredItems.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

위의 useFilter 커스텀 훅은 데이터 배열과 필터 함수를 받아 필터링된 결과를 반환합니다. 이것은 "무엇"을 원하는지를 선언적으로 나타내는 예시입니다.

 

명령형 프로그래밍(Imperative Programming):

• "어떻게(How)" 작업을 수행해야 하는지를 단계별로 지정하는 방식
• 상태를 직접 변경하고 작업을 단계별로 명시
• 코드가 복잡하고 상태 변화를 추적하기 어려울 수 있음

명령형 프로그래밍 예시 (커스텀 훅: useCounter):

import { useState } from 'react';

// 명령형 프로그래밍 방식으로 카운터를 관리하는 커스텀 훅
function useCounter() {
  const [count, setCount] = useState(0);

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

  return {
    count,
    increment,
    decrement,
  };
}

// 사용 예시
function Counter() {
  const { count, increment, decrement } = useCounter();

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

위의 useCounter 커스텀 훅은 명령형 프로그래밍 방식으로 카운터를 관리합니다. increment와 decrement 함수를 사용하여 상태를 변경합니다. 이것은 "어떻게" 작업을 수행해야 하는지를 명령형으로 나타내는 예시입니다.

 

 

 

결론: 두가지 예시를 바탕으로 우리는 우아하고 클린한 코드를 작성하기 위해 노력해야합니다!