[React] useContext 사용하기

React에서 useContext는 React 컴포넌트 트리 전반에 걸쳐 데이터를 공유하는 방법을 제공합니다. 이 훅을 사용하면 함수형 컴포넌트에서 Context의 값을 쉽게 읽을 수 있습니다. 또한, 하위 컴포넌트가 연속적으로 있는 경우에도 드릴링을 방지할 수 있습니다.

 

useContext와 Context API를 활용한 전역 상태 관리

복잡한 컴포넌트 구조에서 props를 여러 계층에 걸쳐 전달하는 것은 비효율적일 수 있습니다. 이를 해결하기 위해 React의 Context API를 사용할 수 있습니다. useContext 훅을 사용하면 컴포넌트 트리 어디에서나 직접적으로 Context의 값을 읽고 업데이트할 수 있습니다.

UserContext 생성 및 제공

export const UserContext = createContext({
  value: userInterface, // 기본값 설정
  setValue: (value) => {}, // 기본적인 상태 업데이트 함수
});

UserContext를 생성하여, 사용자 데이터를 전역적으로 관리하는 방법을 보여드리겠습니다. createContext를 사용하여 UserContext를 생성하고, 기본값으로 userInterface의 구조를 정의합니다.

UserPage 컴포넌트에서의 Context 제공

function UserPage() {
  const [userData, setUserData] = useState<UserInterface>(UserInterface);

  return (
    <UserContext.Provider value={{ value: userData, setValue: setUserData }}>
      <UserFormComponent />
    </UserContext.Provider>
  );
}

UserPage 컴포넌트에서 useState 훅을 사용하여 userData 상태를 관리하며, UserContext.Provider를 사용하여 userData와 setUserData를 하위 컴포넌트에 제공합니다.

UserFormComponent에서 useContext 사용

export default function UserFormComponent(): JSX.Element {
  const { value, setValue } = useContext(UserContext);

  return (
    <>
      <form onSubmit={}>
        <input
          onChange={(e) => {
            setValue(...)
          }}
          ...
        />
      </form>
    </>
  );
}

UserFormComponent에서 useContext(UserContext)를 사용하여 Context의 값을 손쉽게 사용할 수 있습니다.
이를 통해 중첩된 컴포넌트 구조에서도 간편하게 상태를 관리할 수 있습니다.

 

Context API의 장점: 프로젝트의 복잡성 감소와 코드 재사용성 증가

Context API는 프로젝트의 복잡성을 줄이고, 코드 재사용성을 높이는 강력한 도구입니다. 이를 통해, 중앙에서 관리되는 데이터를 프로젝트 전체에 걸쳐 효율적으로 공유할 수 있게 됩니다, 마치 전역 상태를 관리하는 중앙 집중식 저장소와 같은 역할을 하게 됩니다.

컴포넌트 간 결합도 감소로 인한 유지보수성 향상

Context API는 컴포넌트 간의 결합도를 낮추어 각각을 더 독립적으로 만듭니다. 이로 인해 프로젝트의 유지보수성이 크게 향상되며, 개별 컴포넌트를 수정하거나 업데이트할 때 전체 시스템에 미치는 영향이 줄어듭니다.

성능상의 고려사항 및 최적화 전략

Context API 사용시 성능상의 고려사항도 중요합니다. 특히 상태가 자주 변경되는 경우, 성능 저하의 위험이 있습니다. 이를 관리하기 위해, 상태를 적절히 분리하거나, 메모이제이션(memoization)과 같은 최적화 기술을 고려하는 것이 좋습니다.