처음 배우는 리액트 네이티브 공부 중 저자에게 discussion을 남겨 답변받은 글을 정리한 글입니다.
//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
매개 변수를 상위 컴포넌트에서 받고 사용을 해주어야 한다.