⚛️ 기본 환경: IDE: VS code, Language: React
발생 Error
React에서 다음 Source Code를 실행할 경우,
|
1
2
3
4
5
6
7
8
9
10
|
return (
<AuthContext.Provider>
<MainHeader isAuthenticated={isLoggedIn} onLogout={logoutHandler} />
<main>
{!isLoggedIn && <Login onLogin={loginHandler} />}
{isLoggedIn && <Home onLogout={logoutHandler} />}
</main>
</AuthContext.Provider>
);
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
const Navigation = (props) => {
return (
<AuthContext.Consumer>
{(ctx) => {
return (
<nav className={classes.nav}>
<ul>
{ctx.isLoggedIn && (
<li>
<a href="/">Users</a>
</li>
)}
</ul>
</nav>
);
}}
</AuthContext.Consumer>
);
};
|
🚨 다음과 같은 오류 발생
TypeError: Cannot read properties of undefined (reading 'isLoggedIn')
발생 원인
React.createContect()에서 기본값 설정 시, Provider 객체를 사용
해결 방법
1. Provider를 사용하지 않고 기본값 설정
|
1
2
3
4
5
6
7
8
9
10
|
return (
<Fragment>
<MainHeader isAuthenticated={isLoggedIn} onLogout={logoutHandler} />
<main>
{!isLoggedIn && <Login onLogin={loginHandler} />}
{isLoggedIn && <Home onLogout={logoutHandler} />}
</main>
</Fragment>
);
|
2. value prop을 통한 객체 전달
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
return (
<AuthContext.Provider
value={{
isLoggedIn: false,
}}
>
<MainHeader isAuthenticated={isLoggedIn} onLogout={logoutHandler} />
<main>
{!isLoggedIn && <Login onLogin={loginHandler} />}
{isLoggedIn && <Home onLogout={logoutHandler} />}
</main>
</AuthContext.Provider>
);
|
⭐ 기본값이 있을 경우, Provider는 필요없으나 context에 선언된 객체값이 변하며 해당 값을 다른 Component와 공유하고자 할 경우 Provider 선언이 필요
▶ 기본값이 있으나 값의 변화가 있을 예정이어 Provider를 사용해야할 때는 value prop을 사용하여 기본값을 직접 전달
