인프런 커뮤니티 질문&답변

강의를 너무 잘 듣고 있습니다. 쉽게 설명해주셔서 들으면 이해가 잘되지만, 혼자 코드할때에는 실수나 어림 짐작으로 적용했던 부분이 잘 작동되지 않는데, 이런 저런 시도로도 잘못한 부분을 이해하기 어려워 질문드립니다.

23강의 질문입니다. high-order-function을 진행하면서 hoc로 구분하여 설정하는 경우 렌더링에 대해 질문을 남깁니다. 특히 쿼리에 이름을 주어 작동하는 경우에 대해 질문드립니다. 23-3에서 login-success를 확인하는 쿼리를 제가 짰는데 쿼리에 이름을 주었습니다. 23-3의 login-success화면에서는 오류가 없어서, 해당 코드를 복붙하여 hoc부분에도 적용하였는데 초기 렌더링시에 데이터를 받아오지 못하는 현상이 발생하였습니다. 새로 고침을 해야 데이터가 받아와져서 나타납니다.

순서를 붙여 1~4번까지 차례로 진행하였습니다.

1. 23-3 코드의 정상 렌더링 (쿼리 네임을 주어도 정상 렌더링)

    

   loginCheck와 mypage로 구분되지 않는 코드에서 graphql에 query를 보내면서 이름을 주었습니다. (

   hoc가 아닌 전체 로직이 한꺼번에 구성되는 경우 쿼리에 이름을 주는 경우에도 --->

   정상 렌더링 되었어요. )

해당 부분의 쿼리는 아래와 같으며 JWT로서 데이터를 받아와 사용자명이 렌더링 되었습니다.

const FETCH_USER_LOGGED_IN = gql`
  query fetchUserLoggedIn{
    fetchUserLoggedIn {
      email
      name
    }
  }
`;

2. 23-5부분에 hoc를 이용하여 loginCheck를 분리한 경우

   (이 부분은 1번의 (23-3의 코드를 복붙하여 mypage와 logincheck로 분리하였습니다. 오류가 없어서 굳이 수정하지 않아도

   될것 같아 그냥 두었던 부분입니다) 그런데 사용자명을 받아오지 못한채로 화면이 렌더링이 되었습니다. (graphql이 실패한 것으론 나타납니다. 네트워크를 보면 쿼리를 보내면서 토큰을 첨부하지 못해서 bearer뒷 부분이 없었습니다.)

    

   다만 새로고침을 하면 정상 렌더링이 됩니다.

    

   MyPage 코드는 아래와 같습니다.

    

import { gql, useQuery } from "@apollo/client";
import type { IQuery } from "../../../src/commons/types/generated/types";
import { loginCheck } from "../../../src/components/commons/hocs/loginCheck";

const FETCH_USER_LOGGED_IN = gql`
  query fetchUserLoggedIn{
    fetchUserLoggedIn {
      email
      name
    }
  }
`;

function MyPage() {
  const { data } =
    useQuery<Pick<IQuery, "fetchUserLoggedIn">>(FETCH_USER_LOGGED_IN);

  return <>{data?.fetchUserLoggedIn.name}님, 환영합니다.</>;
}

export default loginCheck(MyPage);

loginCheck는 아래와 같습니다.

import { useEffect } from "react";
import { useRouter } from "next/router";

export const loginCheck = (컴포넌트: any) => (프롭스: any) => {
  const router = useRouter();
  useEffect(() => {
    if (localStorage.getItem("accessToken") === null) {
      alert("로그인 후 이용가능합니다");
      void router.push("/section23/23-05-login-check-hoc");
    }
  }, []);
 //if
  return <컴포넌트 {...프롭스} />;
};

3. hoc를 이용하여 loginCheck를 분리한 경우에 작동원리에 대해 여러가지 검색을 하고, 그 결과를 참조하여 loginCheck에서 accessToken을 받아오고, 만약에 토큰이 없으면 myPage를 렌더링하지 않도록 설정했더니 쿼리네임이 있는 경우에도 정상렌더링이 되었습니다.

import { useEffect } from "react";
import { useRouter } from "next/router";

export const loginCheck = (컴포넌트: any) => (프롭스: any) => {
  const router = useRouter();
  const accessToken = localStorage.getItem("accessToken");
  useEffect(() => {
    if (localStorage.getItem("accessToken") === null) {
      alert("로그인 후 이용가능합니다");
      void router.push("/section23/23-05-login-check-hoc");
    }
  }, []);
  if(accessToken == null ) return null;  
  return <컴포넌트 {...프롭스} />;
};

4. 그리고 더불어, 원두님이 하신것처럼 이름이 없는 쿼리로 설정하였을 때는 loginCheck에 토큰 관련 설정을 넣지 않아도 페이지는 정상 렌더링 되었습니다. (이 부분은 수업에서 진행하신 것입니다)

const FETCH_USER_LOGGED_IN = gql`
  query {
    fetchUserLoggedIn {
      email
      name
    }
  }
`;

인공지능 모델들은 쿼리에 이름이 있는 경우는 cash에 내용을 참조하여 Header에 토큰이 없는 상태의 설정대로 query를 보내고 받아온다고 설명합니다. 그리고 원두님처럼 쿼리명을 주지 않으면 무명쿼리로서 새로 토큰을 붙이고 쿼리를 보내는 과정을 수행한다고 합니다. 그러나 제가 항상 토큰을 지우고 새로 고침한후에 로그인 부분을 확인하므로 기존의 쿼리를 받은 기록이 캐시에 남아서 영향을 미칠것 같지는 않습니다. 그리고, hoc가 아닌 기존의 23-3은 잘 작동했으니, 이 부분의 통신에 대해서 어떤 부분인가 제가 잘 이해하지 못하는 부분이 있는 것 같습니다. 이후 hoc함수를 사용할때에도 유의해야 할것 같아 왜 이러한 현상이 나타나는 것인지에 대해 조언해 주시면 추가적으로 검색을 통해 이해고자 합니다.