hoc render flag 추가

src/containers/analysis/simulator/AnalysisSimulationContainer.js

@@ -19,7 +19,7 @@ import { setLogout } from '@src/redux/features/account/auth/authThunk';
 let playCount = 0;
 let playCounts = 0;
 
-export const AnalysisSimulationContainer = props => {
+export const AnalysisSimulationContainer = ({ history }) => {
   // 슬라이드 모든 데이터
   const { list, count, detail, searchParams, log, stcsList, stcsCount, page } =
     useSelector(state => state.simulationState);

src/router/hoc/authenticationCheck.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useEffect, useLayoutEffect } from 'react';
+import { ReactNode, useEffect, useLayoutEffect, useState } from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 import { useSelector, useDispatch } from '@src/redux/store';
 import { checkToken } from '@src/redux/features/account/auth/authThunk';
@@ -16,15 +16,17 @@ export default function (SpecificComponent: ReactNode, option: IOption) {
   function AuthenticationCheck(props: RouteComponentProps) {
     const dispatch = useDispatch();
     const { user } = useSelector(state => state.authState);
+    const [isRender, setIsRender] = useState<boolean>(false);
 
-    useLayoutEffect(() => {
-      const tokenVerification = async () => {
+    const Component: (props: IProps) => JSX.Element = SpecificComponent as (
+      props: IProps
+    ) => JSX.Element;
+
+    useEffect(() => {
+      dispatch(checkToken() as any).then(({ payload: { result } }) => {
         try {
           // 로그인 해야만 접근 가능한 페이지인지 체크하는 옵션
           const { authRoute } = option;
-          const {
-            payload: { result }
-          } = await dispatch(checkToken() as any);
 
           if (!result) {
             if (authRoute) {
@@ -36,18 +38,14 @@ export default function (SpecificComponent: ReactNode, option: IOption) {
               props.history.replace('/main/dashboard');
             }
           }
+          setIsRender(true);
         } catch (error) {
           // props.history.replace('/account/login');
         }
-      };
-
-      tokenVerification();
+      });
     }, []);
-    const Component: (props: IProps) => JSX.Element = SpecificComponent as (
-      props: IProps
-    ) => JSX.Element;
 
-    return <Component {...props} user={user} />;
+    return <>{isRender ? <Component {...props} user={user} /> : null}</>;
   }
   return AuthenticationCheck;
 }

src/views/analysis/history/AnalysisHistory.js

@@ -3,10 +3,10 @@
 
 import { AnalysisHistoryContainer } from '../../../containers/analysis/history/AnalysisHistoryContainer';
 
-const AnalysisHistory = () => {
+const AnalysisHistory = props => {
   return (
     <div>
-      <AnalysisHistoryContainer />
+      <AnalysisHistoryContainer {...props} />
     </div>
   );
 };

src/views/analysis/simulation/AnalysisSimulation.js

@@ -6,8 +6,8 @@ import '@styles/react/libs/tables/react-dataTable-component.scss';
 import '../../../assets/css/custom.css';
 import { AnalysisSimulationContainer } from '../../../containers/analysis/simulator/AnalysisSimulationContainer';
 
-const AnalysisSimulation = () => {
-  return <AnalysisSimulationContainer />;
+const AnalysisSimulation = props => {
+  return <AnalysisSimulationContainer {...props} />;
 };
 
 export default AnalysisSimulation;