강의 따라했는데 아래 에러 나시는 분들 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. 버전이 달라지면서 Auth지원 관련해서 강의와 차이가 생긴 듯 합니다 간단한 해결 방법 입니다 ./src/hoc/auth.js 파일의 Auth함수를 익명함수가 아닌 기명함수로 변경 import { useEffect } from "react"; import { useDispatch } from "react-redux"; import { auth } from "../_actions/user_action"; const Auth = (SpecificComponent, option, adminRoute = null) => { function AuthenticationCheck(props) { const dispatch = useDispatch(); useEffect(() => { dispatch(auth()).then((res) => { console.log(res); }); }, []); return <SpecificComponent />; } return AuthenticationCheck; }; export default Auth; 2. ./src/compoenent/views/RandingPage, LoginPage, RegsterPage export시 Auth 처리 //LendingPage export default Auth(LandingPage, null); //LoginPage export default Auth(LoginPage, false); //RegisterPage export default Auth(RegisterPage, false); 왜인진 모르겠지만 저는 Auth를 익명함수로 두니까 Auth(컴포넌트) 처리시에 계속 에러가 나더라구요 기명함수로 고쳤더니 에러 해결됐습니다
강사님 강의 내용과 똑같은 코드를 작성했으나 오류가 계속 생성됬는데 어찌저찌 풀어서 참고하실 분들을 위해 남깁니다 제가 오류가 발생한 상황(hoc/auth.js) [강사님과 같은 코드를 작성 후 서버/클라이언트 실행 시 빈 화면이 나옴] (오류 내용 : unctions 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.) - 해결책 : AuthenticationCheck 리턴 시 함수로 리턴하는 것이 아닌 JSX 컴포넌트로 리턴하라고 합니다 (참고 : https://www.inflearn.com/questions/357383) - 실제로 auth.js의 마지막 부분인 을 return AuthenticationCheck -> return < AuthenticationCheck />로 변경 시 정상적으로 작동함을 확인할 수 있었습니다. [hoc/auth.js 코드] import React, { useEffect } from "react"; import { useDispatch } from "react-redux"; import { auth } from "../_action/user_action"; import { useNavigate } from "react-router-dom"; export default function (SpecificComponent, option, adminRoute = null) { //option : null = anyone, true = login user only, false = logout user only function AuthenticationCheck(props) { const dispatch = useDispatch(); const navigate = useNavigate(); useEffect(() => { dispatch(auth()).then((response) => { console.log("auth? ", response); if (!response.payload.isAuth) { // login yet if (option) { navigate("/login"); } } else { // login if (adminRoute && !response.payload.isAdmin) { navigate("/"); } else { if (option === false) { navigate("/"); } } } }); }, []); return ( <SpecificComponent /> // component return이 없으면 React 실행이 안됨. ); } return <AuthenticationCheck />; }
좋은 강의 무료로 제공해주셔서 감사합니다!!! auth.js에서 AuthenticationCheck(props) function 안에서 props.history.push를 쓰시는데 props가 어디에서 넘어왔다고 이해하면 될까요? 그리고 각 케이스마다 history.push를 통해 다른 페이지로 이동시켜주는데 return <SpecificComponent />의 역할이 잘 이해가 안갑니다. HOC 문법인지 다른 의도가 있는건지 궁금합니다!
