작성
·
212
1
import { useState, useCallback } from "react";
import ThemeContext from "./ThemeContext";
import MainContent from "./MainContent";
function DarkOrLight(props) {
const [theme, setTheme] = useState("light");
const toggleTheme = useCallback(() => {
if (theme === "light") {
setTheme("dark");
} else if (theme === "dark") {
setTheme("light");
}
}, [theme]);
return (
<ThemeContext.Provider value={{ theme, toggleTheme }}>
<MainContent />
</ThemeContext.Provider>
)
}
export default DarkOrLight;
import React from "react";
const ThemeContext = React.createContext();
ThemeContext.displayName = "ThemeContext";
export default ThemeContext;
MainContent가 ThemeContext의 하위 컴포넌트입니다.
그러면 <ThemeContext.Provider>
안에 있는 <MainContent />
컴포넌트는 ThemeContext.Provider
안의 props.children
으로 간주될텐데 ThemeContext
에 {props.children}
가 없어도 <MainContent />
가 표시되는 이유가 궁금합니다. .privider
메서드(메서드로 지칭하는게 맞나요...?ㅎ)를 사용하면 자동으로 하위 컴포넌트를 표시하는 기능(암묵적으로 {props.children}
를 사용한다던지...)이 있는 건가요?
답변 1
1
안녕하세요, 소플입니다.
먼저 Provider
는 하위 children
으로 value
를 전달해주는 역할을 하는 ReactNode의 한 종류라고 보시면 됩니다.
그래서 Provider
에는 말씀하신 것처럼 children
속성이 존재하며,
아래 리액트 코드에서 해당 내용을 자세히 살펴보실 수 있습니다.
https://github.com/facebook/react/blob/main/packages/shared/ReactTypes.js#L26-L35
감사합니다.