여러 개의 Context 사용하기

 

여러 개의 Context를 사용하는 경우, React에서는 다양한 방식으로 여러 Context를 동시에 사용할 수 있다. 이를 통해, 애플리케이션 내에서 다양한 데이터를 효과적으로 전달하고관리할 수 있다.

 

여러 개의 Context 사용 방법

1. Context 중첩(Nest Contexts)

여러 개의 Context를 중첩하여 사용할 수 있다. 이 방법은 각각의 Context가 특정 컴포넌트 트리에서만 영향을 미치도록 할 수 있다.

 

2. useContext를 사용하여 여러 Context값 가져오기

여러 Context 값을 동시에 사용하려면 useContext훅을 여러 번 호출하여 각 Context의 값을 가져온다.

 

3. Context.Provider로 여러 Context 관리

여러 개의 Context.Provider를 한 컴포넌트 내에 중첩하여 사용하는 방법이다. 이를 통해 각 Context에 값을 제공할 수 있다.

 

예시코드

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

// 두 개의 Context 생성
const ThemeContext = createContext();
const UserContext = createContext();

function App() {
  const [theme, setTheme] = useState('light');
  const [user, setUser] = useState('John Doe');

  return (
    // 여러 Context를 중첩하여 Provider로 값 전달
    <ThemeContext.Provider value={theme}>
      <UserContext.Provider value={user}>
        <ChildComponent />
      </UserContext.Provider>
    </ThemeContext.Provider>
  );
}

function ChildComponent() {
  // useContext를 사용하여 여러 Context 값 가져오기
  const theme = useContext(ThemeContext);
  const user = useContext(UserContext);

  return (
    <div>
      <p>Theme: {theme}</p>
      <p>User: {user}</p>
    </div>
  );
}

export default App;

 

• ThemeContext와 UserContext : ThemeContext와 UserContext는 각각 다른 상태를 관리 하는 Context이다. 하나는 테마(light/dark), 다른 하나는 사용자 이름을 관리한다.
• ThemeContext.Provider와 UserContext.Provider : 각 Provider는 해당 Context에 값을 제공하고 있다.
• useContext 훅 사용 : ChildComponent에서 useContext를 사용하여 두 개의 Context값(theme, user)을 가져온다.

---

 

다중 Cotext를 결합하여 사용하는 방법

때때로, 여러 Context를 하나로 합쳐서 사용하는 것이 필요할 수 있다. 이럴 때는 Context객체를 결합하여 하나의 값으로 사용할 수도 있다.

 

예시코드

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

// 두 개의 Context 생성
const ThemeContext = createContext();
const UserContext = createContext();

// 여러 Context 값을 하나로 결합하는 커스텀 훅
function useCombinedContexts() {
  const theme = useContext(ThemeContext);
  const user = useContext(UserContext);
  return { theme, user };
}

function App() {
  const [theme, setTheme] = useState('light');
  const [user, setUser] = useState('John Doe');

  return (
    // 여러 Context를 중첩하여 Provider로 값 전달
    <ThemeContext.Provider value={theme}>
      <UserContext.Provider value={user}>
        <ChildComponent />
      </UserContext.Provider>
    </ThemeContext.Provider>
  );
}

function ChildComponent() {
  const { theme, user } = useCombinedContexts(); // 여러 Context 값 결합

  return (
    <div>
      <p>Theme: {theme}</p>
      <p>User: {user}</p>
    </div>
  );
}

export default App;

 

• useCombinedContexts라는 커스텀 훅을 사용하여 여러 Context 값을 하나로 결합하고 이를 통해 ChildComponent에서 두 Context의 값을 간편하게 사용할 수 있다.
• useContext를 여러 번 호출하는 대신 커스텀 훅을 사용하여 코드를 간결하게 유지할 수 있다.

 

 

---

Context가 여러 개일 때의 장점

1. 컴포넌트 분리 : 여러 개의 Context를 사용하면 서로 다른 상태를 관리하는 컴포넌트들을 분리하여 관리할 수 있다. 예를 들어, 테마, 사용자 정보, 언어 설정 등을 각각 독립적으로 관리할 수 있다.
2. 유지보수 용이 : 하나의 Context에 모든 값을 넣기보다는 기능별로 Context를 나누는 것이 유지보수에 유리하다. 각 Context가 독립적으로 상태를 관리하므로, 변경이나 확장이 용이하다.
3. 리렌더링 최적화 : 각각의 Context가 독립적으로 상태를 관리하므로, 하나의 상태가 변경될 때 다른 Context에 영향을 주지 않아 불필요한 리렌더링을 방지할 수 있다.