1
export default function App() {
2
  return <GrandParent value="Hello World!" />
3
}
4

5
function Parent({ value }) {
6
  return <Child value={value} />
7
}
8

9
function Child({ value }) {
10
  return <Message value={value} />
11
}
12

13
function Message({ value }) {
14
  return <div>Received: {value}</div>
15
}

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

3
// 1. Context 만들기
4
// - createContext()로 Context 만들 수 있음
5
// - 기본 값을 설정하고 싶다면, createContext 함수에 인자로 기본 값을 넣어주면 됨
6
const MyContext = createContext('기본값')
7

8
export default function App() {
9
  // 2. Context 객체 안에는 Provider라는 컴포넌트가 들어있음
10
  // Provider 컴포넌트에 공유하고자 하는 값을 value 라는 Props로 설정하면,
11
  // 자식 컴포넌트들에서 해당 값에 바로 접근 가능
12
  return (
13
    <>
14
      <MyContext.Provider value="Hello World">
15
        <Parent />
16
      </MyContext.Provider>
17
      <Parent />
18
    </>
19
  )
20
}
21

22
function Parent() {
23
  return <Child />
24
}
25

26
function Child() {
27
  return <Message />
28
}
29

30
function Message() {
31
  // 3. Context 안에 있던 state 사용하려면, useContext() 사용
32
  // - useContext() : Context 해체해주는 함수, 공유했던 모든 state가 담겨있음
33
  const value = useContext(MyContext)
34
  return <div>데이터 도착함!😁 : {value}</div>
35
}

1
// Context/ThemeContext.js
2
import React from 'react'
3

4
export const themes = {
5
  light: {
6
    foreground: '#000000',
7
    background: '#eeeeee',
8
  },
9
  dark: {
10
    foreground: '#ffffff',
11
    background: '#222222',
12
  },
13
}
14

15
// createContext()로 Context 만들 수 있음
16
export const ThemeContext = React.createContext(themes.dark)

1
// Context/Example
2
import React, { Component } from 'react'
3
import ThemeButton from './ThemeButton'
4
import { ThemeContext, themes } from './ThemeContext'
5

6
export default class Example extends Component {
7
  constructor(props) {
8
    super(props)
9
    this.state = {
10
      theme: themes.light,
11
    }
12
    this.toggleTheme = () => {
13
      this.setState(prev => ({
14
        theme: prev.theme === themes.dark ? themes.light : themes.dark,
15
      }))
16
    }
17
  }
18
  render() {
19
    // 📝 Context에 저장된 데이터를 사용하기 위해, Context의 Provider를 사용
20
    // - 공유를 원하는 state를 value 안에 적어주면 됩니다.
21
    // - ThemeContext로 감싼 모든 컴포넌트와 그 자식컴포넌트는 state를 props 전송없이 직접 사용가능
22
    // 📝 데이터를 사용하려는 컴포넌트에서 Context의 Consumer를 사용 → useContext()로 대체 가능
23
    return (
24
      <div>
25
        <ThemeContext.Provider value={this.state.theme}>
26
          <ThemeButton changeTheme={this.toggleTheme} />
27
          <ThemeContext.Consumer>
28
            {theme => (
29
              <div
30
                style={{
31
                  height: 300,
32
                  width: 300,
33
                  backgroundColor: theme.background,
34
                }}
35
              ></div>
36
            )}
37
          </ThemeContext.Consumer>
38
        </ThemeContext.Provider>
39
        <ThemeButton />
40
      </div>
41
    )
42
  }
43
}

1
// context/ThemeButton.jsx
2
import React, { useContext } from 'react'
3
import { ThemeContext } from './ThemeContext'
4

5
export default function ThemeButton(props) {
6
  // Context 안에 있던 state 사용하려면
7
  // (1) 만들어둔 Context를 import
8
  // (2) useContext() 안에 넣기
9
  // -- useContext()는 Context 해체해주는 함수, 공유했던 모든 state가 담겨있음
10
  const theme = useContext(ThemeContext)
11
  return (
12
    <button
13
      {...props}
14
      onClick={props.changeTheme}
15
      style={{ backgroundColor: theme.background, color: theme.foreground }}
16
    >
17
      버튼
18
    </button>
19
  )
20
}

1
import Example from './components/3-10_Context/Example'
2

3
export default function App() {
4
  return (
5
    <>
6
      <Example />
7
    </>
8
  )
9
}