[React] Context API

 

☁️충북대 구름톤 유니브 4기 스터디 일부 내용

 

React를 사용하다 보면 로그인 정보, 다크 모드 같은 테마, 언어 설정처럼 여러 컴포넌트에서 공통으로 사용하는 데이터가 생깁니다. 이런 데이터는 매번 props로 넘겨주기보다는, Context API를 활용해서 컴포넌트 트리 전체에 쉽게 전달할 수 있어요.

이번 글에서는 Context API의 기본 개념부터 사용법, 주의할 점까지 하나씩 정리해보도록 하겠습니다.

---

1. Context란 무엇인가요?

Context는 컴포넌트 트리를 통해 데이터(상태)를 전역적으로 공유할 수 있게 해주는 React의 기능입니다.
기본적으로 props를 일일이 전달하지 않아도, 트리 하위에 있는 모든 컴포넌트가 원하는 데이터를 사용할 수 있게 해줍니다.

예를 들어 로그인 상태, UI 테마, 현재 언어 같은 정보에 적합합니다.

---

2. 기본 사용법

const ThemeContext = React.createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  return <ThemedButton />;
}

function ThemedButton() {
  return (
    <ThemeContext.Consumer>
      {value => <Button theme={value} />}
    </ThemeContext.Consumer>
  );
}

• React.createContext('light'): 기본값을 지정합니다.
• ThemeContext.Provider: value를 통해 하위 컴포넌트에 데이터를 제공합니다.
• ThemeContext.Consumer: 트리 어디서든 value를 사용할 수 있습니다.

---

3. useContext() 훅 사용하기

보다 간결한 방법으로는 useContext 훅을 사용할 수 있습니다.

import { useContext } from 'react';

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <Button theme={theme} />;
}

이 방식은 Consumer를 직접 사용하는 것보다 코드가 훨씬 간단하고 가독성도 좋습니다.

---

4. Context 사용할 때 주의할 점

Context는 편리하지만, 무조건 사용하는 건 좋은 방법이 아닐 수 있어요. 다음 사항을 고려해보세요.

1. 재사용성이 떨어질 수 있습니다.
   특정 Context에 의존하는 컴포넌트는 다른 곳에서 재사용하기 어려워집니다.
2. 불필요한 렌더링이 발생할 수 있습니다.
   Provider의 value가 바뀌면 하위의 모든 Consumer가 다시 렌더링됩니다. 이를 방지하려면 useMemo 등을 활용해서 value가 불필요하게 바뀌지 않도록 관리해야 합니다.
3. 모든 상태를 Context로 관리할 필요는 없습니다.
   컴포넌트 간 깊이가 깊지 않거나 단방향으로만 전달되면, props가 더 명확하고 효율적일 수 있습니다.

---

5. 여러 개의 Context 사용하기

여러 종류의 전역 상태를 관리해야 할 때는 Context를 분리해서 사용하는 것이 좋습니다. 예를 들어 로그인 정보, 언어 설정, 테마 등을 각각 따로 관리할 수 있습니다.

<AuthContext.Provider value={user}>
  <LanguageContext.Provider value={lang}>
    <ThemeContext.Provider value={theme}>
      <App />
    </ThemeContext.Provider>
  </LanguageContext.Provider>
</AuthContext.Provider>

이렇게 중첩 구조를 만들 수도 있지만, 지나치게 많아지면 Context nesting 문제가 생기므로 주의해야 합니다.

---

6. 마무리하며

Context API는 전역 상태를 간단하게 관리할 수 있도록 도와주는 매우 유용한 기능입니다.
하지만 무분별한 사용은 오히려 유지보수를 어렵게 만들 수 있기 때문에, props로 해결 가능한 경우는 그대로 두고, 진짜 전역이 필요한 경우에만 Context를 도입하는 것이 좋습니다.

지금까지 React Context API에 대해 정리해보았습니다. 직접 예제를 만들어보면서 감을 익혀보는 걸 추천드립니다.