React에서 컴포넌트의 상태 관리는 중요한 요소 중 하나입니다. 이를 위해 React는 useState나 useEffect와 같은 훅을 제공합니다. 그러나, 더 복잡한 로직이나 공통된 상태 관리 기능을 재사용하고 싶다면 어떻게 해야 할까요? 이때 Custom Hook을 사용할 수 있습니다.

Custom Hook이란?

Custom Hook은 React의 훅을 사용하여 로직을 재사용할 수 있는 함수입니다. 기본적으로 다른 훅을 조합하여 사용하는 것이 일반적이지만, 필요에 따라 다른 로직도 포함할 수 있습니다.

Custom Hook 사용하기

Custom Hook을 사용하려면 아래와 같이 함수를 작성합니다.

import { useState } from 'react';

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

  // 상태나 로직을 사용하는 코드

  return [state, setState];
}

위와 같이 Custom Hook 함수를 작성한 후, 해당 Hook을 사용하고자 하는 컴포넌트에서 호출할 수 있습니다.

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

  // state와 setState 사용

  return (
    // JSX 코드
  );
}

Custom Hook 예시

아래는 간단한 Custom Hook 예시입니다. 이 Custom Hook은 입력되는 초기값에 따라 색상을 변경하고, 클릭 이벤트 핸들러를 제공합니다.

import { useState } from 'react';

function useColorChanger(initialColor) {
  const [color, setColor] = useState(initialColor);

  function handleClick() {
    const newColor = color === 'red' ? 'blue' : 'red';
    setColor(newColor);
  }

  return [color, handleClick];
}

위의 Custom Hook을 사용하여 컴포넌트에서 상태 관리를 할 수 있습니다.

function App() {
  const [color, handleClick] = useColorChanger('red');

  return (
    <div>
      <button style={{ backgroundColor: color }} onClick={handleClick}>
        Change Color
      </button>
    </div>
  );
}

위의 예시에서는 useColorChanger Hook을 사용하여 컴포넌트에서 색상을 변경하고, 클릭 이벤트 핸들러를 제공하였습니다.

Custom Hook의 장점

Custom Hook을 사용하면 컴포넌트의 로직을 추상화하여 재사용 가능하게 만들 수 있습니다. 이는 코드를 더 간결하고 읽기 쉽게 만들어줍니다. 또한, Custom Hook은 테스트하기 쉽고, 캡슐화하여 로직을 숨길 수 있는 장점도 있습니다.

결론

React에서 상태 관리는 중요한 요소입니다. Custom Hook을 사용하면 로직을 추상화하여 재사용할 수 있고, 코드를 더 간결하게 만들 수 있습니다. 이로써 컴포넌트의 상태 관리를 보다 효율적이고 유지보수하기 쉽게 할 수 있습니다.

#React #CustomHook