React에서 전역 데이터를 다루는 법: Context

aksen5240·2024년 1월 9일

React

목록 보기

12/14

📚 React에서 전역 데이터를 다루는 법: Context

앞선 글에서 데이터를 다루는 방법으로 Props랑 State에 대해 알아봤었다. 하지만, 프로젝트의 규모가 커지게 되면 Props랑 State만으로는 데이터를 모두 다루기 힘든 경우가 있다.

리액트에서는 이럴 때 Context라는 것을 이용해서 데이터를 다룬다. 이번 글을 통해 Context가 무엇인지, 그리고 이를 통해 어떤 문제를 해결할 수 있는지 한 번 알아보자.

Context란

📌 Context 등장 배경

예를 들어서 다국어 기능이라는 걸 만든다고 해보자. 다국어 기능을 구현 시, 언엇값처럼 프로젝트 전체적으로 사용하는 데이터를 전역 데이터라고 부른다.

만일 전역 데이터를 다룰 때 Props와 State만을 사용하면, Props로 여러 번, 여러 곳에 내려줘야 한다는 문제점이 발생한다. 이 때, 위와 같은 문제를 Prop을 내려주는게 드릴로 땅을 파는 것 같다고 해서 Prop Drilling이라고 부른다.

이를 해결 하기 위해 Context라는 개념이 등장하게 된다. Context를 사용하면 Props를 거치지 않고 어려 컴포넌트에 데이터를 넘겨줄 수 있다.

📌 Context의 이점

Context를 직역하면 맥락이라는 뜻인데, 쉽게 생각하면 상황에 대한 정보라고 이해하면 된다.

리액트에서 Context를 사용하려면 우선 데이터를 공유할 범위를 정해야 하는데, Context.Provider라는 컴포넌트로 범위를 정해줄 수 있다. 이렇게 범위를 정하게 되면 Provider의 자손 컴포넌트에서는 Props를 거치지 않고 데이터를 자유롭게 쓸 수 있게 된다.

이를 통해, Context를 사용하면 많은 컴포넌트에서 사용하는 데이터를 반복적인 Prop전달, 즉 Prop Drilling 문제 없이 전역적으로 데이터를 공유할 수 있는 이점을 취할 수 있다.

Context의 장점

프롭 드릴링 제거: 여러 컴포넌트에 걸쳐 데이터를 전달할 필요 없이, 필요한 곳에서 바로 데이터를 가져다 쓸 수 있다.

유지보수 용이: 데이터의 소스가 명확해지고, 변경 사항이 발생했을 때 추적하기 쉬워진다.

컴포넌트 재사용성 향상: 특정 데이터에 의존하지 않는 컴포넌트를 만들 수 있어 재사용성이 좋아진다.

Context 사용 방법

Context를 사용해 데이터를 내려주는 방법에 대해 배워보자.

📌 Context 생성하기

Context는 createContext 라는 함수를 통해 만들 수 있다. 이때, 아래 예시처럼 선택적으로 기본값을 설정할 수도 있다.

import { createContext } from 'react';
const LocaleContext = createContext('ko'); // 'ko'가 기본값

📌 Context 적용하기

Context를 쓸 때는 반드시 값을 공유할 범위를 정하고 써야 한다. 이때 범위는 Context 객체에 있는 Provider 라는 컴포넌트로 정해줄 수 있다.

React에서는 Context.Provider 컴포넌트를 사용하여 Context 값을 하위 컴포넌트에게 제공하며, Provider의 value prop을 통해 공유하고자 하는 데이터를 전달한다.

<LocaleContext.Provider value="en">
  {/* 이 안의 컴포넌트들은 어디서나 LocaleContext 사용 가능 */}
</LocaleContext.Provider>

📌 Context 값 사용하기

Context값을 사용하기 위해서 useContext Hook을 사용해 Context 값에 접근 가능하다. 이 Hook은 Context 객체를 인자로 받아 해당 Context의 현재 값을 반환하게 된다.

function Board() {
  const locale = useContext(LocaleContext); // context값 사용
  return <div>언어: {locale}</div>;
}

📌 State와 함께 사용하기

Context를 State와 함께 사용하기 위해서, Provider 역할을 하는 컴포넌트를 하나 만들고, 여기서 State를 만들어서 value 로 넘겨줄 수 있다. 추가적으로, 아래 예시의 useLocale 같이 useContext를 사용해서 값을 가져오는 커스텀 Hook을 만들 수도 있다.

이렇게 하면 Context에서 사용하는 State 값은 반드시 내가 만든 함수를 통해서만 쓸 수 있게 되기 때문에 안전한 코드를 작성하는데 도움이 된다.

import { createContext, useContext, useState } from 'react';

const LocaleContext = createContext({});

export function LocaleProvider({ children }) {
  const [locale, setLocale] = useState('ko');
  return (
    <LocaleContext.Provider value={{ locale, setLocale }}>
      {children}
    </LocaleContext.Provider>
  );
}

export function useLocale() {
  const context = useContext(LocaleContext);

  if (!context) {
    throw new Error('useLocale는 LocaleProvider 내부에서만 사용할 수 있습니다.');
  }

  const { locale } = context;
  return locale;
}

export function useSetLocale() {
  const context = useContext(LocaleContext);

  if (!context) {
    throw new Error('useSetLocale는 LocaleProvider 내부에서만 사용할 수 있습니다.');
  }

  const { setLocale } = context;
  return setLocale;
}