function App() {
  const dispatch = useDispatch();
  const { theme } = useSelector((state: RootState) => state.theme);

  useEffect(() => {
    const jwtToken = cookies.get('token');
    if (jwtToken) {
      dispatch(setLogin(true));
    } else {
      dispatch(setLogin(false));
    };
  }, []);
  
  console.log("App 렌더링");

  const routePath = [
    {
      path: "/",
      element: <Home />
    },
    {
      path: "/posts",
      element: <Review />
    },
    {
      path: "/posts/update/:pId",
      element: <ReviewUpdate />
    },
    {
      path: "/posts/recommendation/good-product",
      element: <Recommend pageType='good-product' />
    },
    {
      path: "/posts/recommendation/bad-product",
      element: <Recommend pageType='bad-product' />
    },
    {
      path: "/posts/detail/:pId",
      element: <ReviewDetail />
    },
    {
      path: "/create",
      element: <ReviewCreate />
    },
    {
      path: "/new-password",
      element: <ChangePassword />
    },
    {
      path: "/mypage/:userId",
      element: <MyPage />
    },
    {
      path: "/error/not_found",
      element: <ErrorPage />
    }
  ];
  
  return (
    <>
      <ThemeProvider theme={theme === "light" ? lightTheme : darkTheme}>
        <GlobalStyle />
        <LayoutWrapper>
          <Header />
            <Routes>
              {routePath.map(data => (
                <Route key={data.path} path={data.path} element={data.element} />
              ))}
            </Routes>
          <Footer />
        </LayoutWrapper>
      </ThemeProvider>
		</>
  )
}

이렇게 App 컴포넌트에서 라우팅 처리를 해두었습니다(styled-components 사용중입니다).
전체 페이지 레이아웃은 LayoutWrapper 컴포넌트이고 그 안에서 헤더-본문-푸터 순으로 배치되어있는 구조입니다. 헤더와 푸터는 페이지 이동해도 바뀔 필요가 없으니 페이지 이동에 따른 라우팅 처리는 본문 컴포넌트만 해두었습니다.

그래서 페이지 이동 시 헤더와 푸터는 리렌더링 되지 않아야 될텐데 계속 리렌더링이 되는 상황입니다.

헤더와 푸터에서 useSelector로 참조하고 있는 전역 state 가 바뀌고 있는지, 혹은 페이지 이동시 App 컴포넌트가 리렌더링 되고있는건지를 확인해봤는데 아니었고 useNavigate 훅을 호출하는 구문때문이라는 것을 발견했는데 도대체 왜 useNavigate 때문에 리렌더링 되는건지를 모르겠습니다...

현재 푸터의 코드는

export default function Footer() {
  const { theme } = useSelector((state: RootState) => state.theme);
  const { category } = useSelector((state: RootState) => state.category, () => { return true });  // 리뷰 페이지에서 카테고리가 변경되어도 리렌더링 되지 않게  
  const dispatch = useDispatch();
  const navigate = useNavigate();

  const moveToHome = () => {
    // 리뷰 페이지의 카테고리가 클릭된 상태에서 홈 화면 이동시 카테고리 state 초기화 -> 안하면 홈 화면의 카테고리 버튼이 활성화 되어있음 
    if (category !== "none") dispatch(resetCategory());
    navigate("/");
  };

  console.log("푸터 렌더링");

  return (
    <FooterWrapper>
      <FooterArea>
        <IconArea>
          <FooterLogo logotheme={theme} onClick={moveToHome} />
          <ContactIconArea>
            <ContactIcon icontype={facebook} />
            <ContactIcon icontype={instagram} />
            <ContactIcon icontype={youtube} />
            <ContactIcon icontype={mail} />
          </ContactIconArea>
        </IconArea>
        <FooterTextArea>
          <FooterText>상품명 : 리뷰잇</FooterText>
          <FooterText>사업자등록번호 : 123-45-6789 | 개인프로젝트 | 익스프레스 | 리액트 | 고유번호 : 123456</FooterText>
          <FooterText>주소 : 서울시 강남구 무슨무슨로 아무개빌딩 207호 (123456) | 고객센터 : abc123@gmail.com</FooterText>
          <FooterText>2023 (주) 개인회사   Inc. All rights reserved.</FooterText>
        </FooterTextArea>
      </FooterArea>
    </FooterWrapper>
  )
}

이렇게 되어있는 상황인데, 여기서 const navigate = useNavigate(); 구문을 주석처리해야 페이지 이동 시 리렌더링이 안되더라구요.

참조하고있는 전역 state인 theme은 변하지 않는 상황이고 category는 useSelector의 두번째 인자로 true를 반환하는 함수를 지정했기 때문에 category가 변해도 리렌더링 되지 않는것을 확인했구요.

const navigate = useNavigate(); 를 지워야만 리렌더링이 되지 않습니다. 헤더도 마찬가지입니다.

원래 useNavigate 훅을 가져오는 컴포넌트는 라우팅 발생 시 다 리렌더링이 되는건가요?

0개의 답변

Q&A 목록