Context API 정리

목적

친구들과 함께 학교 프로젝트를 진행하던 중, 로그인 시스템을 구현해야 했다. 우리 프로젝트는 자체 로그인이 아닌 Google OAuth를 사용했기 때문에, OAuth가 어떻게 동작하는지부터 이해해야 했다. 우여곡절 끝에 로그인 자체는 구현해냈지만, 사용자의 로그인 여부를 확인하는 것이 더 큰 문제였다.

이것을 해결하기 위해 구글링을 하던 중, "Context API로 로그인 상태 관리하기"라는 글을 발견했다. 글을 읽고 바로 적용해보려 했지만, 처음 사용하는 기술이라 좀 어려움이 있었다. 그래도 이렇게 저렇게 다듬은 끝에, 로그인 여부를 확인하는 기능을 구현할 수 있었다.

그래서 이 글에서는 제대로 알지 못하고 사용했던 Context API를 사용해 보고 이를 정리해보았다.

Context API

Context API는 React에 내장된 API로, props를 사용하지 않고도 컴포넌트 간에 데이터를 쉽게 공유할 수 있도록 도와준다. 컴포넌트마다 일일이 props를 전달하지 않아도 컴포넌트 트리 전체에 데이터를 전달할 수 있으며, 모든 컴포넌트에서 사용해야 하는 데이터를 전달할 때 특히 유용하게 사용할 수 있다.

언제 사용해야 할까?

우선, props를 사용할 때 발생하는 문제점을 살펴보자. 예를 들어, 한 부모 컴포넌트에 10개의 자식 컴포넌트가 있다고 가정해보자. 이때, 최상위 부모 컴포넌트에서 가장 아래의 자식 컴포넌트로 데이터를 전달하려면, 각 단계에서 props를 전달하고 받아야 하는 작업이 반복된다. 이러한 문제를 prop drilling이라고 한다.

이를 코드로 살펴보면 아래와 같은 상황이 발생한다는 것을 확인할 수 있다.

function Parents() {
  return <Child1 name="junjuny" />;
}

export default Parents;

.
.
.

function Child10({ name }) {
  return <h1>Hello, {name}!</h1>;
}

export default Child10;

이런 문제를 해결하기 위해 사용하는 것이 바로 Context API다. Context API를 사용하면 중간 단계의 컴포넌트들을 거치지 않고도, 최상위 컴포넌트에서 필요한 데이터를 하위 컴포넌트에 바로 전달할 수 있다. 이를 통해 prop drilling 문제를 효과적으로 해결할 수 있다.

주로 어디에 사용할까?

Context API는 주로 다음과 같은 상황에서 사용된다.

1. 테마 (라이트 모드, 다크 모드)

2. 사용자 정보 (로그인 유무 등등)

3. 선호하는 언어 (다국어 지원)

이 외에도, 전역적으로 사용해야 하는 데이터가 있을 때 유용하게 사용할 수 있다.

단점..

가장 큰 단점으로는 아래와 같은 점들이 있다.

1. Provider로 감싼 컴포넌트에서 상태 변경이 발생하면, 하위 트리 전체의 Context를 구독하고 있는 모든 컴포넌트가 리렌더링된다.

2. 특정 Context.Provider에 의존하기 때문에, 같은 데이터 구조를 사용하는 다른 부분에서 재사용이 어렵다. 이를 해결하려면 Context를 분리하거나, 커스텀 훅을 만들어야 하는 추가 작업이 필요하다.

이러한 문제들이 있다.

사용법

순서대로 정리해보면

1. createContext를 사용하여 Context를 생성한다.

2. 생성한 Context의 Provider를 사용해 데이터를 전달한 컴포넌트를 감싼다.

3. Provider의 value 속성을 통해 공유할 데이터를 설정한다.

4. useContext 훅을 사용해 데이터가 필요한 컴포넌트에서 데이터를 가져온다.

코드로 살펴보면 아래와 같다.

import { createContext } from "react";

export const MyContext = createContext(초기값);

function Parents() {
  return (
    <MyContext.Provider value={전달 데이터}>
      <Child1 />
    </MyContext.Provider>
  );
}

export default Parents;

import { useContext } from "react";

function Child10() {
  const data = useContext(MyContext);
  
  return <h1>{data}</h1>;
}

export default Child10;

마무리

오늘은 Context API를 직접 사용해보고, 제대로 공부하며 정리하는 시간을 가졌다. 지금까지는 그냥 "잠깐 귀찮고 말지 뭐" 하며 props를 사용했지만, 앞으로는 상황에 맞게 효율적으로 Context API를 잘 활용해봐야겠다.