리액트 App.js useEffect 비동기 호출순서 이슈 해결 Suspense lazy

프로젝트를 하면서 가장 해결하기어려워서 애먹었던 부분이 있다. 

바로 App.js의 useEffect 비동기요청의 실행순서 부분이다.

예상했던 실행순서에 따라 실행이되지않아 사용자 인가가 정보가 필요한 페이지 (ex 마이페이지)에서 새로고침시 데이터를 받아오지 못하는 이슈가 있었다.

 

프로젝트가 끝날때 까지도 해결이되지 않아 임시방편으로 해결해두고, 이후 리팩토링을 하면서도 그 이슈에 대해 여러가지를 찾아보고 적용해보았지만 쉽게 해결이 되지 않았다.

플젝이 끝나고 약 1달이 지난무렵.. 같이 개발했던 우리팀 수진님하고 디스코드로 근황주고 받다가 그 이슈에 대해 얘기하게되었고 그날 그 문제를 diggingg하다가 드디어...!!! 새벽 3시가 넘어서 문제가 해결되었다. 😭

정말 ... 이 문제를 해결하려고 useEffect hook에 조건도 줘보고, App.js useEffect를 아예 빼보기도하고, axios instance를 적용해보기도했는데.. 아무것도 이 이슈 코드를 해결해준 건 없었던 슬픈 과거여 안녕... 🥲

 

드!디!어! 이 이슈 뭉치가 해결되어서 넘넘 기쁘고 개발에 애정이 한스푼 더 보태진 기분으로 잠들었다. 

 

당시 프로젝트 마감시 발표문서에 적어두었던 이슈사항 

또 다른 산

새로고침시 redux-persist에서 불러오는 액세스토큰이 헤더에 설정되는 것보다, 인가코드가 필요한 다른 페이지의 요청이 먼저 실행되어 요청실행이될때 토큰이 없어서 Unauthorized 문제 발생
App.js에서 새로고침시 refresh 요청을 보내고 토큰값도 잘 받아와지는데 실행 순서의 문제 ..
우선은 임시방편으로 인가 정보가 필요한 페이지에는 일일이 헤더에 Authorization 값을 넣어줌
더 좋은 방법이 있는지 공부 필요

 

📌 문제점 

원하는 작동 방식

새로고침시 App.js에서 원래 가지고있는 토큰으로 서버에 refresh 요청을 보내서 new 액세스토큰을 재발급 받는 비동기 요청이 가장 먼저 실행이 되고, 새로 발급받은 액세스토큰이 헤더에 설정되고 나서 그 토큰 정보로 마이페이지에서 데이터를 받아오는 get요청이 실행되어야 한다.

 

문제

마이페이지 get요청이 가장 먼저 실행되고, 그 이후 App.js의 코드인 토큰 정보를 설정하는 로직이 이후에 실행된다. 따라서 초기 get 요청시 헤더에 토큰 정보가 빠진 상태로 요청을 보내서 응답에 실패하므로 데이터를 받아오지 못하는 오류가 발생한다. 

 

원인

App.js, 마이페이지 모두 서버와 통신하는 비동기 처리를 위해 useEffect 훅으로 관리했는데, useEffect의 실행순서는 최상단 컴포넌트인 App.js부터 실행이 되는 것이아니고 하위에 있는 컴포넌트의 useEffect가 먼저 실행된다. 그리고나서 하위 컴포넌트가 모두 렌더링 된 이후에 App.js의 useEffect가 실행된다. 이에 App.js의 useEffect 함수가 가장 늦게 실행되어 비동기요청이 원했던 순서대로 작동하지 않아 토큰이 먼저 설정되지 않는 순서상의 이슈가 발생한다. 

 

해결

Suspense Lazy 사용하여 해결

App.js 하위 컴포넌트들을 Suspense로 감싸주어 하위 컴포넌트의 렌더링을 미루고 App.js가 먼저 실행되게 하고, App.js의 비동기 요청이 완료된 시점에 하위 컴포넌트를 렌더링하게 한다. 

 

Suspense Lazy 적용 이전

Before

Suspense Lazy 적용 이후

After

 

(지금 보면 App.js의 refresh 요청은 계속 빨간색으로 실패하는데, 그 이유는 로컬환경이라서 그렇다. 서버단에서 리프레시토큰을 쿠키에 담아서 보내주는데 배포 이후엔 배포 주소에 set cookie 정보를 담는 것으로 변경했기때문에, 로컬 환경에서는 로그인시 리프레시토큰이 쿠키에 담기지 않아서 리프레시 요청에 에러가 나는 것이다. 

여기선 리프레시 요청을 성공하지 않는것이 현재 해결하려는 문제점과 상관은 없기때문에 무시해도 좋다.)

 

스크린샷 화면은 로컬환경이지만, 배포환경과 맞추기위해 useEffect가 2번 호출되는걸 막는 코드로 배포환경처럼 useEffect hook이 한번만 렌더링되도록 설정해두었다.

 

그 이유를 잠깐 첨언하자면...

배포 이전에 로컬환경에서만 개발했을때는 useEffect가 2번실행되면서 마이페이지에 내가 좋아한 레시피 정보를 받아오는 get요청이 1번째 요청은 실패, 2번째 요청은 성공했다. 어쨌든 get요청이 refresh요청보다 먼저 실행되었지만 화면에는 문제없이 잘 데이터가 띄워져서 이슈라고 전혀 생각지도 못했었다. 이렇게 아래처럼 데이터는 잘받아와서 띄워졌었다.

 

로컬환경에서 strict mode로 useEffect의 함수가 두번씩 호출됨 double invoked

 

배포환경과 개발환경이 다른 이유?

결론적으로 CRA로 구축한 리액트 앱의 경우 개발모드에서는 strict 모드가 적용되어 함수가 두번 호출된다. 

 

리액트를 npx create-react-app으로 보일러플레이트를 깔고 개발하면 자동으로 strict모드로 설정이 되는데, strict 모드는 개발하는 동안에는 함수가 두 번 호출된다. 항상 콘솔로그를 보면 두 번 호출이 되어있었는데 이 strict 모드 때문이다.

(배포되고나면, 즉 프로덕션 모드에서 strict모드는 저절로 작동하지 않는다.)

strict 모드는 말그대로 strict하게! 엄격하게 컴포넌트를 검사하고, 함수를 의도적으로 "이중으로 호출"해서 문제가 될 경우 경고 메시지를 띄워주어 우리 앱의 잠재적인 문제를 알려준다.

즉, 두번 실행이 되었는데 두 개의 결과값이 다르다??????

그럼 그 코드는 문제가 있다는 뜻....

리액트가 친절히 문제가 있다고 알려준것인데도 이걸 모르고 개발하느라 고생했다. ^^

 

하여튼 결론적으로 strict 모드가 적용된 로컬 환경에서는 2개 요청 중에 한개는 실패, 한개는 성공해서 데이터가 띄워지긴했으나..  배포환경에서 돌려보니, useEffect가 한 번만 실행되었고 아예 get요청이 실패하면서 화면에 데이터가 안띄워지는 대참사가 발생했다는 것이다.

 

 

이전 코드 전체

//App.js 

import React, { useState, useEffect } from "react";
import GlobalStyle from "./GlobalStyle";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { useSelector, useDispatch } from "react-redux";
import styled from "styled-components";

import Gnb from "./components/common/GNB/Gnb";
import SignUpForm from "./components/layout/RegisterForm/SignUpForm";
import LogIn from "./pages/LogIn/LogIn";
import NewRecipe from "./pages/NewRecipe/NewRecipe";
import OAuth2RedirectHandler from "./components/layout/RegisterForm/OAuth2RedirectHandler";
import EditRecipe from "./pages/EditRecipe/EditRecipe";

import Home from "./pages/Home/Home";
import RecipeDetail from "./pages/RecipeDetail/RecipeDetail";
import FridgeDigging from "./pages/FridgeDigging/FridgeDigging";
import MyFridge from "./pages/MyFridge/MyFridge";
import MyPage from "./pages/MyPage/MyPage";
import AdminPanel from "./components/layout/Admin/AdminPanel";

import axios from "axios";
import { setLoggedIn } from "./features/userSlice";
import Footer from "./components/layout/Footer/Footer";

import { useRef } from "react";
import CustomToast from "./components/common/CustomToast/CustomToast";


function App() {
  const dispatch = useDispatch(); //for redux dispatch

  // alert 대신 사용되는 toast 관련 상태
  const showToast = useSelector((state) => {
    return state.toast.showToast;
  });

  //로그인 상태 가져와서 변수에 저장
  const isLoggedIn = useSelector((state) => {
    return state.user.isLoggedIn;
  });
  const userToken = useSelector((state) => {
    return state.user.userToken;
  });

  //! Appjs에서 액세스토큰 재발급 요청하고 토큰을 바로 헤더에 줘도 새로고침했을때 다른페이지 (마이페이지, 냉장고 조회) 요청이 먼저 처리되서 400에러..
  const JWT_EXPIRY_TIME = 30 * 60 * 1000; //액세스 토큰 만료시간 30분을 밀리초로 표현
  
  const onSilentRefresh = () => {
    axios
      .post("/api/auth/refresh")
      .then((response) => {
        const ACCESS_TOKEN = response.headers["access-token"]; //eyJ0eX.. 서버에서 response header에 싣어보내는 토큰값
        if (response.status === 200) {
          axios.defaults.headers.common[
            "Authorization"
          ] = `Bearer ${ACCESS_TOKEN}`; //요청헤더에 액세스 토큰 설정

          console.log(
            "토큰 재발급 서버에 요청 후 App.js에서 재발급된 ACCESS_TOKEN",
            ACCESS_TOKEN
          );
          //refesh로 새로받아온 액세스 토큰 리덕스에도 저장하기
          dispatch(setLoggedIn({ userToken: ACCESS_TOKEN }));
          //액세스토큰 만료되기 1분 전 로그인 연장
          setTimeout(onSilentRefresh, JWT_EXPIRY_TIME - 60000);
        }
      })
      .catch((error) => console.log(error, "silent refresh 에러"));
  };

  useEffect(() => {
    if (isLoggedIn && userToken) {
      axios.defaults.headers.common["Authorization"] = `Bearer ${userToken}`; //요청헤더에 액세스 토큰 설정
      console.log("이미있는 리덕스 userToken으로 헤더에 설정", userToken);
      onSilentRefresh(); //새로고침하면 바로 액세스토큰 재발급하는 함수실행
    }
  }, []);

  return (
      <BrowserRouter>
        <GlobalStyle />
        <ScrollToTop />
        <Gnb />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/login" element={<LogIn />} />
          <Route path="/signup" element={<SignUpForm />} />
          <Route path="/recipes/new" element={<NewRecipe />} />
          <Route path="/auth/redirect" element={<OAuth2RedirectHandler />} />
          <Route path="/recipes/edit" element={<EditRecipe />} />
          <Route path="/recipes/:id" element={<RecipeDetail />} />
          <Route path="/search" element={<FridgeDigging />} />
          <Route path="/myfridge" element={<MyFridge />} />
          <Route path="/mypage/:id" element={<MyPage />} />
          <Route path="/admin" element={<AdminPanel />} />
        </Routes>
        {showToast && <CustomToast />}
        <Footer />
      </BrowserRouter>
  );
}

export default App;

//MyPage.js

import MenuTab from "../../components/layout/MenuTab/MenuTab";
import { MyPageContainer } from "./MyPageStyle";

const MyPage = () => {
  return (
    <MyPageContainer>
      <MenuTab></MenuTab>
    </MyPageContainer>
  );
};
export default MyPage;

//MenuTab.js

import { useState } from "react";
import { Link, useParams } from "react-router-dom";
import CommentsBox from "../MyCommentsBox/CommentsBox";
import MyProfile from "../MyProfile/MyProfile";
import MyRecipeBox from "../MyRecipeBox/MyRecipeBox";
import MyRecipeLikedBox from "../MyRecipeLikedBox/MyRecipeLikedBox";
import {
  MenuTabContainer,
  Menu,
  Li,
  MenuTitle,
  MenuContent,
} from "./MenuTabStyle";

const MenuTab = () => {
  //실시간 시간 변환
  function timeSince(date) {
    let seconds = Math.floor((new Date() - date) / 1000);

    let interval = seconds / 31536000;

    if (interval > 1) {
      return Math.floor(interval) + "년 전";
    }
    interval = seconds / 2592000;
    if (interval > 1) {
      return Math.floor(interval) + "달 전";
    }
    interval = seconds / 86400;
    if (interval > 1) {
      return Math.floor(interval) + "일 전";
    }
    interval = seconds / 3600;
    if (interval > 1) {
      return Math.floor(interval) + "시간 전";
    }
    interval = seconds / 60;
    if (interval > 1) {
      return Math.floor(interval) + "분 전";
    }
    // return Math.floor(seconds) + "초 전";
    return "방금";
  }

  const menuArr = [
    {
      name: "내 프로필",
      title: "",
      content: <MyProfile />,
      pathname: "/profile",
      id: 0,
    },
    {
      name: "내 레시피",
      title: "내가 작성한 레시피",
      content: <MyRecipeBox timeSince={timeSince} />,
      pathname: "/written_recipes",
      id: 1,
    },
    {
      name: "내 좋아요",
      title: "내가 좋아한 레시피",
      content: <MyRecipeLikedBox timeSince={timeSince} />,
      pathname: "/loved_recipes",
      id: 2,
    },
    {
      name: "받은 댓글",
      title: "내가 받은 댓글",
      content: <CommentsBox timeSince={timeSince} />, //시간 변환 함수 내려주기
      pathname: "/received_comments",
      id: 3,
    },
  ];

  return (
    <MenuTabContainer>
      <Menu className="menu">
        {menuArr.map((menu, idx) => (
          <Li key={idx} isFocused={String(idx) === id}>
                      {/* 링크랑 컴포넌트 탭 안에있는 컨텐트 연결 */}
            <Link to={`/mypage/${menu.id}`}>{menu.name}</Link>
          </Li>
        ))}
      </Menu>
      <MenuTitle>
        {menuArr[id].title}
      </MenuTitle>
      <MenuContent className="MenuContent">
        {menuArr[id].content}
      </MenuContent>
    </MenuTabContainer>
  );
};

export default MenuTab;

//MyRecipeLikedBox.js 
//내가 좋아한 레시피 컴포넌트 

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faTrashCan } from "@fortawesome/free-solid-svg-icons";
import {
  RecipeFrameOuterContainer,
  NoticeMsgBox,
} from "../MyRecipeBox/MyRecipeBoxStyle";
import RecipeFrame from "../RecipeFrame/RecipeFrame";
import UserName from "../../common/UserName/UserName";
import Pagination from "../../common/Pagination/Pagination";
import { useEffect, useRef, useState } from "react";
import axios from "axios";
import Loading from "../../common/Loading/Loading";

const MyRecipeLikedBox = ({ timeSince }) => {
  const [myLikedRecipeList, setMyLikedRecipeList] = useState([]);
  const [page, setPage] = useState(1); // 페이지네이션으로 바뀔 현재 페이지 위치
  const [total, setTotal] = useState(0); //전체 게시글 수
  const [totalPages, setTotalPages] = useState(0); //전체 페이지 수
  const [isUpdatedForLikedList, setIsUpdatedForLikedList] = useState(false); //좋아요한 레시피 삭제시 업뎃여부로 화면에 재렌더링 하려고
  const [isLoading, setIsLoading] = useState(true);

  //내가 좋아한 레시피 목록 조회하기
  const getMyLikedRecipeList = async () => {
    try {
      const { data } = await axios.get(
        `/api/recipes/favorite?page=${page}`
        //임시 방편으로 headers를 직접 달아줌 
        // {
        //   headers: { Authorization: `Bearer ${userToken}` },
        // }
      );
      console.log(data);
      setTotal(data.pageInfo.totalElements);
      setTotalPages(data.pageInfo.totalPages);
      setMyLikedRecipeList([...data.data]);
      setIsLoading(false); //데이터 다 받아왔으니 로딩상태 false로 만들기
    } catch (err) {
      console.log(err);
    }
  };

  //페이지 바뀔때, 좋아하는 레시피 목록에서 삭제할때마다 재렌더링 + 좋아요 누를때 바로 좋아요 누른 목록 렌더링되게 total 수에 따라 재렌더링
  useEffect(() => {

    getMyLikedRecipeList();
    setIsUpdatedForLikedList(false);
  }, [page, isUpdatedForLikedList]);

  return (
    <>
      {isLoading ? (
        <Loading />
      ) : (
        <>
          <RecipeFrameOuterContainer>
            {/* 서버에서 받아온 내좋아요 레시피 목록의 요소가 있을때만 레시피 프레임 띄우기 */}
            {myLikedRecipeList.length ? (
              myLikedRecipeList.map((data) => (
                <RecipeFrame
                  key={data.id}
                  recipeIdForLikedList={data.id}
                  setIsUpdatedForLikedList={setIsUpdatedForLikedList}
                  imagePath={data.imagePath}
                  title={data.title}
                  date={timeSince(Date.parse(data.lastModifiedAt))}
                  icon2={
                    <FontAwesomeIcon
                      icon={faTrashCan}
                      mode={"my_liked_recipe"}
                    ></FontAwesomeIcon>
                  }
                >
                  <UserName
                    image={data.member.profileImagePath}
                    name={data.member.name}
                  ></UserName>
                </RecipeFrame>
              ))
            ) : (
              <NoticeMsgBox>아직 내가 좋아한 레시피가 없어요</NoticeMsgBox>
            )}
          </RecipeFrameOuterContainer>
          <Pagination
            page={page}
            setPage={setPage}
            totalPages={totalPages}
          ></Pagination>
        </>
      )}
    </>
  );
};

export default MyRecipeLikedBox;

 

컴포넌트가  App.js -> MyPage.js  -> MenuTab.js -> MyRecipeLikedBox.js 이렇게 구성되어있어서 여러 코드를 가지고왔지만 서버에 통신하는 코드는 App 컴포넌트와 MyRecipeLikedBox 컴포넌트 두군데에 있다.

 

//App.js 

const onSilentRefresh = () => {
    axios
      .post("/api/auth/refresh")
      .then((response) => {
        const ACCESS_TOKEN = response.headers["access-token"]; //eyJ0eX.. 서버에서 response header에 싣어보내는 토큰값
        if (response.status === 200) {
          axios.defaults.headers.common[
            "Authorization"
          ] = `Bearer ${ACCESS_TOKEN}`; //요청헤더에 액세스 토큰 설정

          console.log(
            "토큰 재발급 서버에 요청 후 App.js에서 재발급된 ACCESS_TOKEN",
            ACCESS_TOKEN
          );
          //refesh로 새로받아온 액세스 토큰 리덕스에도 저장하기
          dispatch(setLoggedIn({ userToken: ACCESS_TOKEN }));
          //액세스토큰 만료되기 1분 전 로그인 연장
          setTimeout(onSilentRefresh, JWT_EXPIRY_TIME - 60000);
        }
      })
      .catch((error) => console.log(error, "silent refresh 에러"));
  };

  useEffect(() => {
    if (isLoggedIn && userToken) {
      axios.defaults.headers.common["Authorization"] = `Bearer ${userToken}`; //요청헤더에 액세스 토큰 설정
      // console.log(axios.defaults.headers.common);
      console.log("이미있는 리덕스 userToken으로 헤더에 설정", userToken);
      onSilentRefresh(); //새로고침하면 바로 액세스토큰 재발급하는 함수실행
    }
  }, []);

 

먼저 App 컴포넌트에는 useEffect를 활용해서 로그인 상태이고 토큰정보가 있으면 기존에 가지고 있는 토큰을 헤더에 설정한 후 그 토큰 정보를 가지고 onSilentRefresh() 함수를 실행시킨다.

onSilentRefresh() 함수에서 액세스토큰을 재발급받는 요청을 서버에 보내는데, 서버 응답에 성공하면 재발급받은 토큰을 다시 요청헤더에 심어준다. 이제 그럼 (토큰 설정하는 코드가 제일 먼저 실행되기만 한다면) 토큰이 필요한 다른 요청을 보낼때 헤더에 토큰정보 담아줄 필요가 없어진다. 

(새로고침을해도 로그인 정보와 토큰정보는 계속 남아있는데 그 이유는 redux persist로 로그인정보를 관리하기 때문에 새로고침해도 세션스토리지에 남아있어 로그인 정보가 날라가지 않는다.)

 

//MyRecipeLikedBox.js
//내가 좋아한 레시피 목록 조회하기
  const getMyLikedRecipeList = async () => {
    try {
      const { data } = await axios.get(
        `/api/recipes/favorite?page=${page}`
        // {
        //   headers: { Authorization: `Bearer ${userToken}` },
        // }
      );
      console.log(data);
      setTotal(data.pageInfo.totalElements);
      setTotalPages(data.pageInfo.totalPages);
      setMyLikedRecipeList([...data.data]);
      setIsLoading(false); //데이터 다 받아왔으니 로딩상태 false로 만들기
    } catch (err) {
      console.log(err);
    }
  };

  //페이지 바뀔때, 좋아하는 레시피 목록에서 삭제할때마다 재렌더링 + 좋아요 누를때 바로 좋아요 누른 목록 렌더링되게 total 수에 따라 재렌더링
  useEffect(() => {
    getMyLikedRecipeList();
    setIsUpdatedForLikedList(false);
  }, [page, isUpdatedForLikedList]);

 

내 좋아요 컴포넌트에서는 useEffect훅에서 getMyLikedRecipeList() 함수를 호출해서 여기서 favorite 목록 get 요청을 보낸다. 저기 headers가 주석처리 되어있는 부분은 문제 해결이 되기 전에 임시 방편으로 서버에 요청 보낼때 헤더에 토큰 정보를 손수 넣어준 것이다.

 

내좋아요 컴포넌트가 하위 컴포넌트이기때문에, 여기서 useEffect가 먼저 실행이되고, 그리고나서 최상위인 App 컴포넌트의 useEffect가 실행이 된다. 

 

 

그래서 이전코드에서는 마이페이지에서 새로고침하면 내가 좋아하는 레시피 데이터를 가져오는 favorite?page=1 요청인 get 요청이 가장 먼저 실행된다. 

하지만 헤더에 토큰을 심어주는 App.js의 코드가 그 이후에 실행되므로 get요청인 favorite 요청을 들여다보면 요청헤더인 Request Headers에 어디에도 Authorization에 토큰이 담겨있지 않다. 토큰 정보가 필요한 마이페이지에 토큰이 없는상태로 요청을 보내니 당연히 데이터를 불러오지 못하는 것이다.

 

 

이후 Suspense Lazy 적용 전체 코드

다른 코드는 같으므로 App.js 만 적음

//App.js 

//lazy, Suspense 추가
import React, { useState, useEffect, lazy, Suspense } from "react";
import GlobalStyle from "./GlobalStyle";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { useSelector, useDispatch } from "react-redux";
import styled from "styled-components";

import Gnb from "./components/common/GNB/Gnb";
import SignUpForm from "./components/layout/RegisterForm/SignUpForm";
import LogIn from "./pages/LogIn/LogIn";
import NewRecipe from "./pages/NewRecipe/NewRecipe";
import OAuth2RedirectHandler from "./components/layout/RegisterForm/OAuth2RedirectHandler";
import EditRecipe from "./pages/EditRecipe/EditRecipe";

==========
//로딩 컴포넌트 추가
import Loading from "./components/common/Loading/Loading";

//React Lazy로 변환
const Home = lazy(() => import("./pages/Home/Home"));
const RecipeDetail = lazy(() => import("./pages/RecipeDetail/RecipeDetail"));
const FridgeDigging = lazy(() => import("./pages/FridgeDigging/FridgeDigging"));
const MyFridge = lazy(() => import("./pages/MyFridge/MyFridge"));
const MyPage = lazy(() => import("./pages/MyPage/MyPage"));
const AdminPanel = lazy(() => import("./components/layout/Admin/AdminPanel"));
==========

import axios from "axios";
import { setLoggedIn } from "./features/userSlice";
import Footer from "./components/layout/Footer/Footer";

import { useRef } from "react";
import CustomToast from "./components/common/CustomToast/CustomToast";

function App() {
  const dispatch = useDispatch(); //for redux dispatch

  // alert 대신 사용되는 toast 관련 상태
  const showToast = useSelector((state) => {
    return state.toast.showToast;
  });

  //로그인 상태 가져와서 변수에 저장
  const isLoggedIn = useSelector((state) => {
    return state.user.isLoggedIn;
  });
  const userToken = useSelector((state) => {
    return state.user.userToken;
  });

  //! Appjs에서 액세스토큰 재발급 요청하고 토큰을 바로 헤더에 줘도 새로고침했을때 다른페이지 (마이페이지, 냉장고 조회) 요청이 먼저 처리되서 400에러..
  const JWT_EXPIRY_TIME = 30 * 60 * 1000; //액세스 토큰 만료시간 30분을 밀리초로 표현
  
  const onSilentRefresh = () => {
    axios
      .post("/api/auth/refresh")
      .then((response) => {
        const ACCESS_TOKEN = response.headers["access-token"]; //eyJ0eX.. 서버에서 response header에 싣어보내는 토큰값
        if (response.status === 200) {
          axios.defaults.headers.common[
            "Authorization"
          ] = `Bearer ${ACCESS_TOKEN}`; //요청헤더에 액세스 토큰 설정

          console.log(
            "토큰 재발급 서버에 요청 후 App.js에서 재발급된 ACCESS_TOKEN",
            ACCESS_TOKEN
          );
          //refesh로 새로받아온 액세스 토큰 리덕스에도 저장하기
          dispatch(setLoggedIn({ userToken: ACCESS_TOKEN }));
          //액세스토큰 만료되기 1분 전 로그인 연장
          setTimeout(onSilentRefresh, JWT_EXPIRY_TIME - 60000);
        }
      })
      .catch((error) => console.log(error, "silent refresh 에러"));
  };

  useEffect(() => {
    if (isLoggedIn && userToken) {
      axios.defaults.headers.common["Authorization"] = `Bearer ${userToken}`; //요청헤더에 액세스 토큰 설정
      console.log("이미있는 리덕스 userToken으로 헤더에 설정", userToken);
      onSilentRefresh(); //새로고침하면 바로 액세스토큰 재발급하는 함수실행
    }
  }, []);

  return (
      <BrowserRouter>
        <GlobalStyle />
        <ScrollToTop />
        <Gnb />
        <Suspense fallback={<Loading />}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/login" element={<LogIn />} />
          <Route path="/signup" element={<SignUpForm />} />
          <Route path="/recipes/new" element={<NewRecipe />} />
          <Route path="/auth/redirect" element={<OAuth2RedirectHandler />} />
          <Route path="/recipes/edit" element={<EditRecipe />} />
          <Route path="/recipes/:id" element={<RecipeDetail />} />
          <Route path="/search" element={<FridgeDigging />} />
          <Route path="/myfridge" element={<MyFridge />} />
          <Route path="/mypage/:id" element={<MyPage />} />
          <Route path="/admin" element={<AdminPanel />} />
        </Routes>
        </Suspense>
        {showToast && <CustomToast />}
        <Footer />
      </BrowserRouter>
  );
}

export default App;

 

먼저 React.lazy로 dynamic import 동적 불러오기를 한다. 이전에는 최상위에 모두 import 를 불러와 사용하는 파일/라이브러리를 싹 다 가져오는 정적 불러오기를 했다. 이는 모든 컴포넌트를 한번에 불러오기때문에 첫 화면이 렌더링될때까지 시간이 오래걸린다는 단점도 있었는데, 필요한 컴포넌트를 lazy로 동적 불러오기를 할 경우 당장 사용하지 않는 컴포넌트는 나중에 불러오게 된다.

나는 여기서 사용자 인가가 필요한 페이지만 React lazy를 통해 동적 import를 해왔는데 작동이 잘되어서 다른 컴포넌트는 lazy로 불러오지는 않았다. 

그리고 Route 컴포넌트들을 Suspense로 감싸고, Suspense 하위에서 라우트로 보여줄 컴포넌트는 React.lazy로 불러온다.

Suspense는 lazy컴포넌트가 로드되길 기다리는동안 fallback 인자로 받는 컨텐츠를 보여준다. 여기서 로딩컴포넌트를 fallback 인자로주었다.

이렇게 Suspense는 lazy가 적용된 인가가 필요한 페이지에서 데이터를 다 받아올때까지 기다리고 그동안 로딩컴포넌트를 보여준다.

App.js에서 토큰설정하는 비동기 로직이 먼저 작동되고 이후 Suspense가 걸려있는 하위 컴포넌트인 마이페이지의 요청을 보내면서 원했던 순서대로 작동이 되는것이다.

 

 

이렇게 적용하면 배포환경에서도 깔끔하게 App.js의 refresh 요청이 먼저가므로 먼저 토큰이 설정되고, 그 다음 그 토큰 정보와함께 get 요청을 실행하므로 문제없이 잘 작동한다. 🎊

 

정리

📌 React.lazy를 통해 동적 import를 해와서 코드를 분할한다. Code splitting!

- 필요하지 않은 코드는 처음에 불러오지 않는다.
- 처음 리액트가 번들 파일을 다 다운 받고 이후에 전체 앱을 화면에 보여주는데, 코드 분할을 하면 번들이 거대해지는 걸 막아 초기 앱 로딩시간을 단축시켜주는 장점도 있다.

📌 lazy 컴포넌트들은 단독으로 사용 못하고, Suspense 하위의 컴포넌트에서 렌더링되어야 한다. 

📌 Suspense로 감싸주는 자식 컴포넌트들은 비동기 작업을 처리하는 컴포넌트이다. (MyPage컴포넌트)

📌 Susepnse에 걸려있는 컴포넌트가 비동기 작업을 진행하는 동안에는 fallback으로 할당받는 특정 컴포넌트(로딩)가 렌더링된다.

📌 비동기 작업을 하는 자식 컴포넌트는 (내 예시의 경우 <MyPage>같은 컴포넌트) 비동기 작업이 끝나면, 그때 원래 컴포넌트인 MyPage를 리렌더링해서 보여준다.

 

문제를 어떻게든 해결하고 더 알아보니... 보통은 React lazy와 Suspense는 비동기 렌더링의 문제보다는, 번들 사이즈의 크기를 줄이고 앱의 성능 개선을 위해 사용된다. 비동기 렌더링에 관련된 부분 즉, 비동기 통신이 완료될때까지 기다렸다가 비동기 통신이 끝나면 그때 데이터를 화면에 띄워주는 방법은 data-fetching 관련된 Suspense가 더 관련이 있는 것 같다. 

나의 경우 App.js 와 마이페이지에서의 비동기 호출순서 이슈가 React lazy와 Suspense로도 해결이 되었지만.. 사실 더 정확히 문제가 발생된 그 부분을 해결하고싶으면 Suspense for data fetching 부분을 더 공부해서 적용해보는 것도 좋을 것 같다.