Context Sample

ContextSample-2.js

import React, { createContext, useContext } from 'react';

const MyContext = createContext('defaultValue');

function Child() {
  const text = useContext(MyContext);
  return <div>안녕하세요? {text}</div>
}

function Parent() {
  return <Child  />
}

function GrandParent() {
  return <Parent  />
}

function ContextSample() {
  return (
    <MyContext.Provider value="GOOD">
      <GrandParent />
    </MyContext.Provider>
  )
}

export default ContextSample;

ContextSample-3.js

import React, { createContext, useContext, useState } from 'react';

const MyContext = createContext('defaultValue');

function Child() {
  const text = useContext(MyContext);
  return <div>안녕하세요? {text}</div>
}

function Parent() {
  return <Child  />
}

function GrandParent() {
  return <Parent  />
}

function ContextSample() {
  const [value, setValue] = useState(true);

  return (
    <MyContext.Provider value={value ? 'GOOD' : 'BAD'}>
      <GrandParent />
      <button onClick={() => setValue(!value)}>Click Me</button>
    </MyContext.Provider>
  )
}

export default ContextSample;

ContextSample.js

import React, { createContext } from 'react';

function Child({ text }) {
  return <div>안녕하세요? {text}</div>
}

function Parent({ text }) {
  return <Child text={text} />
}

function GrandParent({ text }) {
  return <Parent text={text} />
}

function ContextSample() {
  return <GrandParent text="GOOD" />
}

export default ContextSample;