처음 배우는 리액트 네이티브 - 공부

라따뚜이·2022년 4월 28일
0

처음 배우는 리액트 네이티브 공부 중 저자에게 discussion을 남겨 답변받은 글을 정리한 글입니다.

Provider 사용 시 children이라는 props를 전달하지 않았는데 어떻게 children을 받는가? 그리고 children은 무엇인가?

//App.js
   <ProgressProvider>
      <StatusBar barStyle='dark-content'/>
      <Navigation />
   </ProgressProvider>
//ProgressProvider.js
const ProgressProvider = ({ children }) => {
    console.log("children : ", children);
    const [inProgress, setInProgress] = useState(false);
    const spinner =
        {
            start: () => setInProgress(true),
            stop: () => setInProgress(false),
        };
    console.log("children : ", children);
    const value = { inProgress, spinner };
    return (
        <ProgressContext.Provider value = {value} >
            {children}
        </ProgressContext.Provider>
    );
};

ProgressProvider의 하위 컴포넌트들이 children이다. 그러면 따로 매개변수를 받질 않았는데 어떻게 ProgressProvider에서는 children을 매개변수를 받아서 사용하는가?
그 이유는 하위 컴포넌트들이 자동으로 props로 전달되기 때문이다.
그래서 children을 매개변수로 받을 수 있다.
또한 children 사용하질 않는다면, 화면에 하위 컴포넌트를 그려주질 않는다.(즉, 렌더링 안된다.) 그렇기에 하위 컴포넌트를 사용한다면, 반드시 children 매개 변수를 상위 컴포넌트에서 받고 사용을 해주어야 한다.

profile
돈만 준다면 해 노예

0개의 댓글