특정 컴포넌트 특정 페이지에서 제거하기

특정 컴포넌트 특정 페이지에서 제거하기

header나 navbar와 같이 모든 페이지에 있어야 하는 컴포넌트가 특정 페이지 (로그인, 회원가입)에는 보여지지 않아야 할 때도 있습니다.
props를 이용해 isVisible값과 같은 변수를 이용해 처리할 수 도 있지만, react-rotuer를 이용해서 처리해봤습니다.

컴포넌트 준비

react-router 설정 컴포넌트

저는 App.js에 router를 설정합니다. Header와 Navbar가 공통으로 필요한 컴포넌트 입니다.

// app.js
import React, { useEffect } from 'react';
....

const App = () => {
 return (
   <div className="body">
     1️⃣<Switch>
       3️⃣<Route path="/login" component={LoginPage} />
       <Route path="/register" component={RegisterPage} />
       2️⃣<>
         <Header />
         <Navbar />
         <Route path="/" exact={true} component={MainPage} />
         <Route path="/search" component={SearchPage} />
         <Route path="/detail/:storeId" exact={true} component={DetailPage} />

         <Redirect from="*" to="/" />
       </>
     </Switch>
   </div>
 );
};

export default App;

1. react-router1의 Switch.
   Switch를 이용해 하나의 Route 혹은 컴포넌트만 선택할 수 있게 합니다.
2. 공통 컴포넌트(Header와 Navbar)와 필요한 페이지들을 <>(Fragment)를 이용해 하나로 묶었어, Switch로 인해 안에 있는 것들을 한 덩어리로 인식하게 했습니다.
3. 공통 컴포넌트가 필요없는 페이지들을 입니다. <> 바깥에 Route를 설정해 공통 컴포넌트의 영향을 받지 않게 구현했습니다.