[React] Context

Context란?

React에서 Context는 컴포넌트 간에 데이터를 공유하기 위한 메커니즘으로 Context를 사용하면 중간에 있는 컴포넌트들을 건너뛰고, 프로퍼티를 하위 컴포넌트로 직접 전달하지 않고도 데이터를 전달할 수 있습니다.

Context를 사용하면 상위 컴포넌트에서 데이터를 생성하고, 하위 컴포넌트에서 이 데이터를 사용할 수 있는데, 이를 통해 컴포넌트 트리 전체에서 동일한 데이터에 접근할 수 있게 됩니다.

 

Context를 사용하려면 먼저 React.createContext() 함수를 사용하여 Context 객체를 생성해야하고, Context 객체의 Provider 컴포넌트를 사용하여 데이터를 제공하고, Consumer 컴포넌트를 사용하여 데이터를 소비할 수 있습니다.

Provider 컴포넌트는 상위 컴포넌트에서 데이터를 설정하고, 하위 컴포넌트에서 이 데이터에 접근할 수 있도록 합니다. Consumer 컴포넌트는 Provider 컴포넌트로부터 제공된 데이터에 접근하고 사용할 수 있습니다.

이를 통해 컴포넌트 간에 데이터를 전파하면서, 중간에 있는 컴포넌트들이 데이터를 전달하지 않아도 되므로 코드의 중복을 줄일 수 있고, 관리도 편리해집니다.

 

Context를 사용예시

1. 사용자 로그인 상태 관리:

• Context를 사용하여 사용자의 로그인 상태를 저장하고 관리할 수 있습니다.
• 로그인 정보를 Context에 저장하고, 필요한 컴포넌트에서 해당 정보를 사용할 수 있습니다.

// 로그인 상태를 저장하는 Context 생성
const AuthContext = React.createContext();

// AuthProvider 컴포넌트 정의
const AuthProvider = ({ children }) => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const login = () => {
    setIsLoggedIn(true);
  };

  const logout = () => {
    setIsLoggedIn(false);
  };

  return (
    <AuthContext.Provider value={{ isLoggedIn, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
};

// 로그인이 필요한 컴포넌트에서 사용자 로그인 상태에 접근
const Home = () => {
  const { isLoggedIn, login, logout } = useContext(AuthContext);

  return (
    <div>
      {isLoggedIn ? (
        <button onClick={logout}>로그아웃</button>
      ) : (
        <button onClick={login}>로그인</button>
      )}
    </div>
  );
};

 

2. 어플리케이션 테마 설정:

• Context를 사용하여 어플리케이션의 테마 설정을 관리할 수 있습니다.
• 테마 관련 정보를 Context에 저장하고, 컴포넌트에서 해당 테마 정보를 사용하여 스타일을 조정할 수 있습니다.

// 테마 정보를 저장하는 Context 생성
const ThemeContext = React.createContext();

// ThemeProvider 컴포넌트 정의
const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(theme === 'light' ? 'dark' : 'light');
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

// 테마를 적용하는 컴포넌트에서 테마 정보에 접근
const Header = () => {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <header className={theme}>
      <h1>어플리케이션</h1>
      <button onClick={toggleTheme}>테마 변경</button>
    </header>
  );
};

3. 사용자 언어 설정

• Context를 사용하여 사용자의 언어 설정을 관리할 수 있습니다.
• 언어 관련 정보를 Context에 저장하고, 컴포넌트에서 해당 언어 정보를 사용하여 다국어 지원 기능을 구현할 수 있습니다.

 

// 언어 정보를 저장하는 Context 생성
const LanguageContext = React.createContext();

// LanguageProvider 컴포넌트 정의
const LanguageProvider = ({ children }) => {
  const [language, setLanguage] = useState('en');

  const changeLanguage = (lang) => {
    setLanguage(lang);
  };

  return (
    <LanguageContext.Provider value={{ language, changeLanguage }}>
      {children}
    </LanguageContext.Provider>
  );
};

// 다국어 텍스트를 표시하는 컴포넌트에서 언어 정보에 접근
const WelcomeMessage = () => {
  const { language, changeLanguage } = useContext(LanguageContext);

  const handleLanguageChange = (e) => {
    const selectedLanguage = e.target.value;
    changeLanguage(selectedLanguage);
  };

  return (
    <div>
      <h2>환영합니다!</h2>
      <p>현재 언어: {language}</p>
      <select value={language} onChange={handleLanguageChange}>
        <option value="en">English</option>
        <option value="ko">한국어</option>
      </select>
    </div>
  );
};

 

코드 예시들은 각각 로그인 상태 관리, 테마 설정, 언어 설정을 위한 Context를 생성하고, Provider 컴포넌트에서 데이터를 제공하며, Consumer 컴포넌트에서 해당 데이터를 사용하는 방법을 보여줍니다. 이를 통해 전역적으로 데이터를 관리하고 필요한 컴포넌트에서 해당 데이터에 접근할 수 있습니다.

이를 통해 컴포넌트 간의 데이터 전달을 간소화하고, 코드의 유지보수성을 높일 수 있습니다.