React에서 여러 상태 한 번에 관리하는 hook(훅) 만들기

상태 관리는 React 애플리케이션에서 중요한 부분입니다.

하지만 때로는 useState를 과도하게 사용하여 코드의 복잡성을 불필요하게 증가시키는 경우가 있습니다.

 

예를 들어, 다음과 같은 코드를 생각해 볼 수 있습니다:

import React, { useState } from 'react';

const OverusedStateComponent = () => {
  // 각각의 상태를 별도의 useState로 관리
  const [isVisible, setIsVisible] = useState(true);
  const [isDisabled, setIsDisabled] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const [isError, setIsError] = useState(false);
  const [isExpanded, setIsExpanded] = useState(false);
  // ... 더 많은 상태가 이어짐

  // 상태 관련 로직들...
  // ...

  return (
    <div>
      {/* UI 컴포넌트 */}
      {/* ... */}
    </div>
  );
};

 

이 코드는 각 상태를 별도의 useState로 관리하고 있으며, 상태가 많아질수록 코드가 길어지고 복잡해집니다.

이러한 접근 방식은 상태 간의 관계를 추적하기 어렵게 만들고, 유지 보수를 복잡하게 합니다.

이 문제를 해결하기 위한 한 가지 방법은 여러 상태를 하나의 객체로 관리하는 사용자 정의 훅을 만드는 것입니다.

예를 들어, 다음과 같은 훅을 사용할 수 있습니다:

import { useState } from 'react';

export interface StateMap {
  [key: string]: boolean;
}

const useMultipleStates = (initialState: StateMap) => {
  const [states, setStates] = useState<StateMap>(initialState);

  const setState = (newState: StateMap) => {
    setStates(prevState => ({
      ...prevState,
      ...newState
    }));
  };

  return { states, setState };
};

 

이 훅을 사용하면 여러 상태를 하나의 객체에서 관리할 수 있으며, 필요할 때 간편하게 상태를 업데이트할 수 있습니다:

const { states, setState } = useMultipleStates({
  isButtonVisible: true,
  isButtonDisabled: false,
  isFieldReadOnly: false
});

setState({ isButtonVisible: false, isButtonDisabled: true });

 

이러한 방식으로 상태 관리를 중앙화하고 간소화함으로써, 코드의 가독성을 높이고 유지 보수를 용이하게 만들 수 있습니다.