인프런 커뮤니티 질문&답변

Dohun Choi님의 프로필 이미지
Dohun Choi

작성한 질문수

처음 만난 리액트(React)

(실습) Context를 사용하여 테마 변경 기능 만들기

Containment 질문 드립니다.

작성

·

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

Inje Lee (소플)님의 프로필 이미지
Inje Lee (소플)
지식공유자

안녕하세요, 소플입니다.

먼저 Provider는 하위 children으로 value를 전달해주는 역할을 하는 ReactNode의 한 종류라고 보시면 됩니다.

그래서 Provider에는 말씀하신 것처럼 children 속성이 존재하며,

아래 리액트 코드에서 해당 내용을 자세히 살펴보실 수 있습니다.

https://github.com/facebook/react/blob/main/packages/shared/ReactTypes.js#L26-L35

 

감사합니다.

Dohun Choi님의 프로필 이미지
Dohun Choi

작성한 질문수

질문하기