1
// user를 Profile까지 보내려면 모든 중간 컴포넌트를 거쳐야 함
2
function App() {
3
  const [user, setUser] = useState('김철수');
4
  return <Page user={user} />;         // Page에 넘김
5
}
6

7
function Page({ user }) {
8
  return <Header user={user} />;       // Header에 넘김 (Page는 user를 쓰지 않음)
9
}
10

11
function Header({ user }) {
12
  return <Profile user={user} />;      // Profile에 넘김 (Header도 user를 쓰지 않음)
13
}
14

15
function Profile({ user }) {
16
  return <div>{user}</div>;            // 여기서만 실제로 사용
17
}

1
import { createContext } from 'react';
2

3
const UserContext = createContext();
4
// UserContext라는 빈 그릇을 만들었다.
5
// 나중에 이 안에 데이터를 넣어서 아래 컴포넌트들에게 전달할 것이다.

1
function App() {
2
  const [user, setUser] = useState('김철수');
3

4
  return (
5
    // UserContext.Provider로 감싸면 안에 있는 모든 컴포넌트가 user를 쓸 수 있다
6
    <UserContext.Provider value={user}>
7
      <Page />
8
      {/* Page, Page 안의 Header, Header 안의 Profile 모두 접근 가능 */}
9
    </UserContext.Provider>
10
  );
11
}

1
import { useContext } from 'react';
2

3
function Profile() {
4
  // UserContext에서 값을 꺼낸다. Props 없이도 바로 사용 가능!
5
  const user = useContext(UserContext);
6

7
  return <div>사용자: {user}</div>;
8
}

1
App
2
└── ThemeProvider  ← isDark 상태와 toggleTheme 함수를 Context에 넣음
3
    └── Layout     ← isDark로 배경색 변경
4
        ├── ToggleButton  ← toggleTheme으로 모드 전환
5
        └── Content       ← isDark로 텍스트 표시

1
import { createContext, useContext, useState } from 'react';
2

3
const ThemeContext = createContext();
4
// 테마 정보(isDark, toggleTheme)를 담을 그릇을 만든다

1
function ThemeProvider({ children }) {
2
  // isDark: 현재 다크모드인지 여부 (기본값: false = 라이트모드)
3
  const [isDark, setIsDark] = useState(false);
4

5
  // 버튼을 누를 때마다 true ↔ false 를 번갈아 바꾸는 함수
6
  // prev는 현재 값이다. !prev 는 반대값을 의미한다
7
  const toggleTheme = () => setIsDark(prev => !prev);
8

9
  return (
10
    // isDark(현재 모드)와 toggleTheme(변경 함수) 두 가지를 함께 전달
11
    <ThemeContext.Provider value={{ isDark, toggleTheme }}>
12
      {children}
13
    </ThemeContext.Provider>
14
  );
15
}

1
function Layout() {
2
  // ThemeContext에서 isDark만 꺼낸다
3
  const { isDark } = useContext(ThemeContext);
4

5
  const style = {
6
    background: isDark ? '#1a1a1a' : '#ffffff',  // 다크: 어두운 회색 / 라이트: 흰색
7
    color:      isDark ? '#ffffff' : '#000000',  // 다크: 흰 글자  / 라이트: 검정 글자
8
    minHeight: '100vh',
9
    padding: '20px',
10
  };
11

12
  return (
13
    <div style={style}>
14
      <ToggleButton />
15
      <Content />
16
    </div>
17
  );
18
}

1
function ToggleButton() {
2
  // isDark와 toggleTheme 둘 다 꺼낸다
3
  const { isDark, toggleTheme } = useContext(ThemeContext);
4

5
  return (
6
    // 버튼을 누르면 toggleTheme 실행 → isDark가 반전됨
7
    <button onClick={toggleTheme}>
8
      {isDark ? '☀️ 라이트 모드' : '🌙 다크 모드'}
9
      {/* 다크모드일 때: 라이트 모드로 바꾸는 버튼 표시 */}
10
      {/* 라이트모드일 때: 다크 모드로 바꾸는 버튼 표시 */}
11
    </button>
12
  );
13
}

1
function Content() {
2
  const { isDark } = useContext(ThemeContext);
3

4
  // 현재 어떤 모드인지 텍스트로 표시
5
  return <p>현재 모드: {isDark ? '다크' : '라이트'}</p>;
6
}

1
function App() {
2
  return (
3
    <ThemeProvider>   {/* 이 안에 있는 컴포넌트는 모두 ThemeContext에 접근 가능 */}
4
      <Layout />
5
    </ThemeProvider>
6
  );
7
}

1
import { createContext, useContext, useState } from 'react';
2

3
// Context 생성
4
const UserContext = createContext();
5

6
function App() {
7
  const [user, setUser] = useState('김철수');
8

9
  return (
10
    // user(현재 이름)와 setUser(변경 함수)를 함께 전달
11
    <UserContext.Provider value={{ user, setUser }}>
12
      <Page />
13
    </UserContext.Provider>
14
  );
15
}
16

17
// Page는 user를 직접 쓰지 않는다. 그냥 Profile을 렌더링할 뿐
18
function Page() {
19
  return (
20
    <div>
21
      <h1>페이지</h1>
22
      <Profile />
23
    </div>
24
  );
25
}
26

27
function Profile() {
28
  // Props를 받지 않았는데도 user와 setUser를 바로 사용할 수 있다
29
  const { user, setUser } = useContext(UserContext);
30

31
  return (
32
    <div>
33
      <p>사용자: {user}</p>
34
      {/* 버튼 클릭 시 setUser로 이름을 변경 → 화면이 자동으로 다시 그려진다 */}
35
      <button onClick={() => setUser('이영희')}>이름 변경</button>
36
    </div>
37
  );
38
}