컴포넌트 간 상태 공유의 어려움

import React, { useState } from 'react';
import Header from './Header';
import MainContent from './MainContent';
import Footer from './Footer';

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

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

  return (
    <div style={{ padding: '20px', fontFamily: 'sans-serif' }}>
      <h1>프롭스 드릴링 예시</h1>
      <button onClick={toggleTheme}>테마 전환 ({theme})</button>
      {/* Header, MainContent, Footer에 theme과 toggleTheme을 전달해야 함 */}
      <Header theme={theme} toggleTheme={toggleTheme} />
      <MainContent theme={theme} />
      <Footer theme={theme} />
    </div>
  );
}

export default App;

import React from 'react';

function Header({ theme, toggleTheme }) { // theme, toggleTheme을 props로 받음
  return (
    <header style={{ backgroundColor: theme === 'light' ? '#eee' : '#333', color: theme === 'light' ? '#333' : '#eee', padding: '15px', borderRadius: '5px', marginBottom: '20px' }}>
      <h2>헤더</h2>
      <p>현재 테마: {theme}</p>
      {/* Header 내부에서 토글 버튼을 사용하지 않아도 props를 계속 내려줘야 함 */}
      {/* <button onClick={toggleTheme}>테마 전환 (여기에 있어도)</button> */}
    </header>
  );
}

export default Header;

import React from 'react';
import ContentSection from './ContentSection'; // 더 깊은 자식 컴포넌트

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

export default MainContent;

import React from 'react';

function ContentSection({ theme }) { // theme을 props로 받음
  return (
    <div style={{ border: `1px solid ${theme === 'light' ? '#ccc' : '#888'}`, padding: '15px', borderRadius: '5px', marginTop: '15px' }}>
      <h4>콘텐츠 섹션</h4>
      <p>테마에 따라 이 텍스트의 색깔도 변합니다.</p>
    </div>
  );
}

export default ContentSection;

import React from 'react';

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

export default Footer;