p.377 ~ p.378 {children}의 역할이 무엇인지 궁금합니다.

[cocoburger]

아래 코드에서 파라미터로 children을 받고, return에서는 children을 보여주는데요.
의 상위 컴포넌트인 App.js에서는 children을 따로 안보내줍니다.�
그런데 console.log()로 children을 확인 해보니 아래 첨부한 이미지의 값이 나옵니다. name값을 확인해보니 ProgressProvider의 하위 컴포넌트가 출력 되는 걸로 보입니다. 로 감싼 하위 컴포넌트들이 children인가요? 그리고 children을 왜 파라미터로 받는지 이해가 안갑니다.

`const ProgressProvider = ({ children }) => {
console.log("children : ", children);
const [inProgress, setInProgress] = useState(false);
const spinner =
{
start: () => setInProgress(true),
stop: () => setInProgress(false),

    };
const value = { inProgress, spinner };
return (
    <ProgressContext.Provider value = {value} >
        {children}
    </ProgressContext.Provider>
);

}; `

[Alchemist85K]

안녕하세요 @cocoburger 님,

문장이 조금 잘려서 전체 내용은 보이지 않지만, 아마 질문의 맥락은 이것인거 같네요.

"children 이라는 props를 전달하지 않았는데 어떻게 children을 받는가"

<Component>
    <Something />
</Component>

위와 같은 코드가 있다면 Component로 전달되는 props에 <Something />이 children으로 들어갑니다.
children은 자동으로 전달되는 props로 컴포넌트의 자식 컴포넌트가 전달됩니다.
그래서 따로 지정해서 전달해줄 필요가 없습니다.

children을 받아서 사용하지 않으면, <Something />은 화면에 나타나지 않습니다.
Component에서 전달된 <Something />을 사용하지 않았으니까요.
그래서 하위 컴포넌트를 받을거면 컴포넌트에서 children을 받아서 사용해줘야 합니다.

즐거운 하루 되세요
감사합니다.