Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Context Sample
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;
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;
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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.