client(react)와 server(node.js) 연결하기 - 인증하기 중 오류 발생

* 인프런의 "따라하며 배우는 노드, 리액트 시리즈 - 기본 강의" 내용 중 정리

* 오류를 따로 정리하는 페이지(컴퓨터 설정&오류)가 있으나 강의와 직접적인 오류라 생각해 이 곳에 정리

 

* 회원가입, 로그아웃, 인증하기 순서로 이어져야 하나 도중 인증하기에서 오류가 발생해서 남김

 

* 문제 원인 : 강의 내용 중 hoc/auth.js를 작성 후 코드 실행 시(npm run dev) 화면에 빈 화면 나옴

 

오류 내용 : 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 컴포넌트로 리턴하라고 함

auth.js의 마지막 부분을 return AuthenticationCheck  -> return <AuthenticationCheck />로 변경 

 

- 해결에 도움을 준 글 : https://www.inflearn.com/questions/357383

 

[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) {
          if (option) {
            navigate("/login");
          }
        } else {
          //로그인한 상태
          if (adminRoute && !response.payload.isAdmin) {
            navigate("/");
          } else {
            if (option === false) {
              navigate("/");
            }
          }
        }
      });
    }, []);

    return (
      <SpecificComponent /> // component return이 없으면 React 실행이 안됨.
    );
  }

  return <AuthenticationCheck />;
}

 

- 왜 바꾸어야 하나?

- 함수 컴포넌트의 리턴값을 살폈을 때 JSX컴포넌트로 된 경우가 대다수

- 함수형이라고 쓰지 않은 이유는 공식 문서에서도 함수 컴포넌트라고 언급해서(https://ko.reactjs.org/tutorial/tutorial.html)

 

설명에 참고 : (https://chanhuiseok.github.io/posts/react-4/)

 

* 위에서의 AuthentiationCheck : 컴포넌트

- 컴포넌트의 종류는 함수형과 클래스형 컴포넌트로 나뉨

함수 컴포넌트	클래스형 컴포넌트
function으로 정의  return문에 JSX 코드를 반환함	class를 정의하고 render()함수에서 JSX 코드 반환

 

* 설명에 참고 : (https://goddaehee.tistory.com/296)

 

* JSX 코드란?

- javascript에 XML 추가된 확장한 문법

- JSX는 리액트 개발 시 사용

 

예)

function App() {
return (
	<h1>modern javascript</h1>
    )
};

//위와 같이 작성 시 아래처럼 해석함
function App() {
	return React.creactElement("h1", null, "modern javascript");
}

 

* 리액트 함수 컴포넌트 반환 값 중 한 가지가 컴포넌트 

* 설명에 참고 : (https://hsp0418.tistory.com/114)

 

* 참고 : 함수형 컴포넌트가 아닌 함수 컴포넌트라고 부르는 것이 정확한 표현이라는 글

- https://velog.io/@kich555/React-%ED%81%B4%EB%9E%98%EC%8A%A4-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EC%99%80-%ED%95%A8%EC%88%98-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8

[React] 클래스 컴포넌트 와 함수 컴포넌트