Context API 기초

import React from 'react';

// Context를 생성하고 기본값을 설정합니다.
// 기본값은 Provider가 없을 때 사용되거나, 개발 도구에서 타입 힌트를 제공하는 데 사용됩니다.
const ThemeContext = React.createContext({
  theme: 'light', // 기본 테마
  toggleTheme: () => {}, // 기본 함수 (아무것도 하지 않음)
});

export default ThemeContext;

import React, { useState } from 'react';
import ThemeContext from './contexts/ThemeContext'; // Context 임포트
import Header from './components/Header';
import MainContent from './components/MainContent';
import Footer from './components/Footer';

function App() {
  const [theme, setTheme] = useState('light'); // 테마 상태 관리

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

  // Context.Provider의 value prop을 통해 { theme, toggleTheme } 객체를 하위 컴포넌트에 제공
  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      <div style={{ padding: '20px', fontFamily: 'sans-serif' }}>
        <h1>Context API 예제</h1>
        <p>최상위 앱 컴포넌트의 테마: {theme}</p>
        <Header />
        <MainContent />
        <Footer />
      </div>
    </ThemeContext.Provider>
  );
}

export default App;

import React, { useContext } from 'react';
import ThemeContext from '../contexts/ThemeContext'; // Context 임포트

function Header() {
  const { theme, toggleTheme } = useContext(ThemeContext); // useContext 훅으로 Context 값 접근

  return (
    <header style={{
      backgroundColor: theme === 'light' ? '#eee' : '#333',
      color: theme === 'light' ? '#333' : '#eee',
      padding: '15px',
      borderRadius: '5px',
      marginBottom: '20px'
    }}>
      <h2>헤더</h2>
      <p>현재 테마 (헤더): {theme}</p>
      <button onClick={toggleTheme}>테마 전환 (헤더)</button> {/* 함수도 사용 가능 */}
    </header>
  );
}

export default Header;

import React, { useContext } from 'react';
import ThemeContext from '../contexts/ThemeContext';
import ContentSection from './ContentSection'; // 더 깊은 자식 컴포넌트

function MainContent() {
  const { theme } = useContext(ThemeContext); // theme 값만 필요

  return (
    <div style={{
      backgroundColor: theme === 'light' ? '#f8f8f8' : '#555',
      color: theme === 'light' ? '#333' : '#eee',
      padding: '20px',
      borderRadius: '5px',
      marginBottom: '20px'
    }}>
      <h3>메인 콘텐츠</h3>
      <p>이곳은 주요 내용이 표시되는 공간입니다.</p>
      <ContentSection /> {/* props 전달 없이 바로 사용 */}
    </div>
  );
}

export default MainContent;

import React, { useContext } from 'react';
import ThemeContext from '../contexts/ThemeContext';

function ContentSection() {
  const { theme } = useContext(ThemeContext); // theme 값만 필요

  return (
    <div style={{
      border: `1px solid ${theme === 'light' ? '#ccc' : '#888'}`,
      padding: '15px',
      borderRadius: '5px',
      marginTop: '15px'
    }}>
      <h4>콘텐츠 섹션</h4>
      <p>이 텍스트의 색깔도 테마에 따라 변합니다. 프롭스 드릴링 없이!</p>
      <p style={{ color: theme === 'light' ? 'blue' : 'lightblue' }}>현재 테마: {theme}</p>
    </div>
  );
}

export default ContentSection;

import React, { useContext } from 'react';
import ThemeContext from '../contexts/ThemeContext';

function Footer() {
  const { theme } = useContext(ThemeContext); // theme 값만 필요

  return (
    <footer style={{
      backgroundColor: theme === 'light' ? '#eee' : '#333',
      color: theme === 'light' ? '#333' : '#eee',
      padding: '15px',
      borderRadius: '5px'
    }}>
      <p>&copy; 2024 Context API 앱. 현재 테마: {theme}</p>
    </footer>
  );
}

export default Footer;