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

Question

여태껏 다른 분들이 달아주신 댓글을 종합해서 정리해봤습니다

# 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 서버에러

이건 그냥 빡쳐서 자고 다음날 하니까 해결 됐습니다

정 안되면 다음날 해보세요

Sung Jae Lee · Answer

에러 관련해서 tip 주신거 보고 따라하니 정상작동 됬습니다. 그런데 option 설정해주는 부분에 login 페이지가 false고 landing 페이지는 null로 정정해주셔야 할듯 해요.

wsim · Answer

좋은글이네요 감사합니다!

BlkDrgg · Answer

정리 정말 잘 해주셨네요 감사합니다.

yura0501 · Answer

감사합니다!!!!!

wxd8339 · Answer

감사합니다!!