강의 보고 이것저것 해 보고 있습니다..
// ContextProvider.jsx............................................................
export const ContextProvider = ({ children }) => {
const [user, setUser] = useState({
name: 'Test',
});
const [token, _setToken] = useState(localStorage.getItem('ACCESS_TOKEN') || null);
const setToken = (token) => {
_setToken(token);
if (token) {
localStorage.setItem('ACCESS_TOKEN', token); // 토큰이 존재하면 로컬 스토리지에 저장
} else {
localStorage.removeItem('ACCESS_TOKEN'); // 토큰이 없으면 로컬 스토리지에서 제거
}
};
return (
<StateContext.Provider value={{ user, setUser, token, setToken }}>
{children}
</StateContext.Provider>
);
};
///main.jsx........................................................
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<ContextProvider>
<RouterProvider router={router} />
</ContextProvider>
</React.StrictMode>,
)
그런데, ContextProvider = ({ children })에서 children에 빨간줄이 가서 보니,
children' is missing in props validation 이라고 나오더군요.. prop-types를 설치하고, 검증을 했는데.. 이게 맞는지요?
ContextProvider.propTypes = {
//children: PropTypes.node.isRequired,
children: PropTypes.node
};
children 는 main.jsx에서 어떤 값이든 들어올수 있을거 같은데.. 어떻게 구성해야 할지를 모르겠습니다.
gpt에 물어보니, 디버깅과 안정성을 위해서는 검증하는게 좋다는 답변과 어떤 값이 들어올지 모르니,
특정한 상황이 아니면 안해도 괜찮다는상반된 답변을 주네요..
알려주시면 감사하겠습니다.. ^^;