마지막 강의에서 만난 오류 두가지 해결과정

여태껏 다른 분들이 달아주신 댓글을 종합해서 정리해봤습니다
 
# 1. 첫번째 오류 - v6 오류
 
Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.
 
이 오류는 v6에서 element 내부에 Auth 지원이 안되어서 생기는 오류 같습니다
 
## 1-1. 해결방법
 
### 1-1-1. App.js element 수정하기
 
<BrowserRouter>
<Routes>
<Route exact path="/" element={Auth(LandingPage, null)} />
<Route exact path="/login" element={Auth(LoginPage, false)} />
<Route exact path="/register" element={Auth(RegisterPage, false)} />
</Routes>
</BrowserRouter>
 
 
여기서 Auth를 모두 지우고 컴포넌트를 넣으세요
 
<BrowserRouter>
<Routes>
<Route exact path="/" element={<LandingPage />} />
<Route exact path="/login" element={<LoginPage />} />
<Route exact path="/register" element={<RegisterPage />} />
</Routes>
</BrowserRouter>
 
(이렇게)
 
 
### 1-1-2. 각 컴포넌트 export 위치에 Auth를 감싸기
 
export default LoginPage;
export default LandingPage;
export default RegisterPage;
 
지금 LoginPage, LandingPage, RegisterPage의 export가 그냥 이렇게 되어있을 겁니다
 
이자리에서 Auth로 감싸줄 겁니다
 
export default Auth(LoginPage, null);
export default Auth(LandingPage, false);
export default Auth(RegisterPage, false);
 
이렇게 변경하시면 됩니다
 
그리고 강의 중에 작성하는 모든 props.history는
import { useNavigate } from 'react-router-dom'
let navigate = useNavigate()
navigate('/login')
navigate('/') 로 작성하시면 됩니다
 
 
 
# 2. 두번째 오류 - auth.js의 액션 이름 괄호 놓침
 
Uncaught TypeError: (0 , _actions_user_action__WEBPACK_IMPORTED_MODULE_2__.auth)(...).then is not a function
 
이런 오류가 뜨면서 백지가 나타났는데 오류 의미를 몰라서 한참 찾았습니다
 
## 2-1. 해결방법
 
React.useEffect(() => {
dispatch(auth().then(response => {
console.log(response)
}))
}, [])
 
 
이렇게 되어있었는데, (auth().then()) 가 아니라 (auth()).then() 입니다
 
React.useEffect(() => {
dispatch(auth()).then(response => {
console.log(response)
})
}, [])
 
찾기 힘든 오타라 저는 한참 찾았어요.... 조심하시길....
 
 
# 3. 세번째 오류 - 이유를 알 수 없는 504 서버에러
 
이건 그냥 빡쳐서 자고 다음날 하니까 해결 됐습니다
정 안되면 다음날 해보세요
 
 
인프런 커뮤니티 질문&답변
