[React JS] Context

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

const themeDefault = { border: '10px solid red' };
const themeContext = createContext(themeDefault);

export default function App() {
	const theme = useContext(themeContext);
	return (
		<div style={theme}>
			<Sub1 />
		</div>
	)

function Sub1() {
	const theme = useContext(themeContext);
	return (
		<themeContext.provider value = {{ border: '10px solid green' }}>
			<div style={theme}>
				<Sub2 />
			</div>
		</themeContext.provider>
	);
};

function Sub2() {
	const theme = useContext(themeContext);
	return (
			<div style={theme}>
				<Sub3 />
			</div>
	);
};

Sub2는 <themeContext.provider> 안에 들어있다. 그리고 Sub3는 Sub2 안에 있다.

<themeContext.provider> 로 감싸진 부분 안에서 Sub2와 Sub3의 useContext가 뱉어내는 값이 value = {{ border: '10px solid green' }}가 된다.

useContext 를 사용하면 그것의 값은 부모 컴포넌트 중 첫 번째로 등장하는 provider의 value가 된다.