인증 체크 부분 app..js 부분 질문이요

Question

안녕하세요 좋은 강의 잘 들었습니다:) 다름이 아니라 제가 강의를 들으며 실습을 병행해 공부를 하는 중인데요 강의가 열리고 react-router-dom이 업데이트되어서 인지 제 컴퓨터에서는 app.js에서 Switch를 사용하면 진행이 되지 않아 구글링 한 결과로 를 사용하고 대신 < element >를 사용해서 학습을 진행해왔었습니다. 그런데 마지막 인증 체크 부분 강의를 들으면서 문제가 생겼는데요 app.js에서 auth를 어떻게 적용해야 할 지 잘 모르겠습니다. 강사님의 코드를 따라하기엔 저는 component를 사용해서 적용이 안되는 것 같습니다. 구글링을 해봐도 해결할 수 없어 질문글을 남깁니다 감사합니다.

Yoonsang's Record · Answer

안녕하세요! 저도 마찬가지로 react-router-dom v6를 사용해서 꽤 문법이 많이 달라져서 많이 찾아보고 강의들었어요! 제 글 참고하시고 도움되시면 좋겠습니다. hoc/auth.js import React from "react" ; import { useDispatch } from "react-redux" ; import { authUser } from "../_actions/user_action" ; import { useNavigate } from "react-router-dom" ; export default function Auth ({ SpecificComponent , option , adminRoute = null }) { const dispatch = useDispatch (); const navigate = useNavigate (); dispatch ( authUser ()). then (( response ) => { if (! response . payload . isAuth ) { // 로그인 하지 않은 상태 if ( option ) { navigate ( "/login" ); } } else { // 로그인 한 상태 if ( adminRoute && ! response . payload . isAdmin ) { navigate ( "/" ); } else { if ( option === false ) { navigate ( "/" ); } } } }); return < SpecificComponent /> ; } App.js import { BrowserRouter as Router , Routes , Route } from "react-router-dom" ; import LandingPage from "./components/views/LandingPage/LandingPage" ; import LoginPage from "./components/views/LoginPage/LoginPage" ; import RegisterPage from "./components/views/RegisterPage/RegisterPage" ; import Auth from "./hoc/auth" ; function App () { // Auth option // null -> 누구나 접근 가능 // true -> 로그인 한 유저만 접근 가능 // false -> 로그인 한 유저는 접근 불가능 return ( < Router > < Routes > < Route path = "/" element = { < Auth SpecificComponent = { LandingPage } option = {null} /> } /> < Route path = "/login" element = { < Auth SpecificComponent = { LoginPage } option = {false} /> } /> < Route path = "/register" element = { < Auth SpecificComponent = { RegisterPage } option = {false} /> } /> ); } export default App ;

John Ahn · Answer

안녕하세요 !!!  컴포넌트를 사용한다는게  함수형 컴포넌트를 사용한다는건가요 ?!