[React] 특정 페이지에서 컴포넌트 감추기

토이 프로젝트를 진행하던 중 로그인 페이지에서 Header를 보이지 않게 하기 위한 코드를 작성하다가 이에 대해 정리하기 위해 글을 작성한다.

기능 구현하기

// App.js의 router 관련 코드
   <BrowserRouter>
      <TopNavigationBar cart={cart} />
      <Routes>
        <Route path="/" element={<Home products={products} setProducts={setProducts} convertPrice={convertPrice} />} />
        <Route path="/product/:id" element={<DetailPage convertPrice={convertPrice} cart={cart} setCart={setCart} />} /> {/* 여기의 DetailPage 컴포넌트는 /pages/DetailPage.jsx 이다. */}
        <Route path="/cart" element={<Basket cart={cart} setCart={setCart} convertPrice={convertPrice} checkList={checkList} setCheckList={setCheckList} />} />
        <Route path="/login" element={<LoginPage />} />;
      </Routes>
    </BrowserRouter>

여기서 경로가 /login일 때, <TopNavigationBar/> 컴포넌트를 감추려고 한다.

이를 만족하기 위해 사용한 코드는 아래와 같다.

export const TopNavigationBar = ({ cart }) => {
  ...
  if (window.location.pathname === "/login") return null;

  return (
	// NavigationBar 코드 작성
  )
}

조건문의 코드는 hostname 뒤의 '/' 문자 뒤의 경로를 가져오는 코드이다.

해당 경로가 /login 일 때는 null을 리턴하며, 나머지 경로에서는 작성한 navigationBar 코드가 적용된다.

해당 기능이 잘 적용되는지 확인을 해보자.

//로그인 페이지로 이동하기 위한 아이콘(버튼)
import { useNavigate } from 'react-router-dom';
...
const navigate = useNavigate();
...
 <div className={styles.mypage} onClick={() => navigate("/login")}>
    <img src="/images/icon-user.svg" alt="user"/>
    <span>로그인</span>
 </div>

해당 영역을 누르면 로그인 페이지로 이동하기 위해 useNavigate() hook을 사용하였으며, onClick을 이용하여 login 페이지로 이동하니 header 컴포넌트가 잘 숨겨졌다.

link component / useNavigate( ) hook

클릭 이벤트가 발생하면 로그인 페이지로 이동하는 로직을 구현해야하니 아래의 2가지를 생각하고 있었다.

react-router-dom 에서 제공하는 컴포넌트와 Hook

link : 클릭 시 해당 페이지로 바로 이동하는 로직 구현 시에 사용한다.

useNavigate : 특정 이벤트가 실행됐을 때 페이지를 전환 하거나, 페이지 전환 시 추가로 처리해야 하는 로직이 있을 경우에 사용한다.

link 컴포넌트를 사용한다면 라우터는 새로운 경로로 이동하고 페이지를 다시 렌더링한다. 그러나 새로고침을 하지 않는 한 현재 페이지의 컴포넌트 상태와 라우팅 상태는 그대로 유지된다.

그렇기 때문에 현재 페이지의 상태 및 컴포넌트의 라이프사이클이 초기화되지 않아 지금의 상황에서 link를 사용하는 것은 적절하지 않다고 생각하여 useNavigate를 사용했다