168일차 - 특정화면에서 Footer 숨기기

특정화면에서 Footer 숨기기

파이널 프로젝트 cloudi를 하면서 Footer에서 문제가 일어났었다.
React로 SPA를 구현하느라고 Switch 밖에 Footer를 놓다 보니, 원하지 않은 파트에서도 Footer가 렌더링 되는 현상이 일어 났다.

TimeKeeper를 예시로 들자면 아래와 같이 App.js를 구성한 것이다.

// App.js

import { BrowserRouter, Route, Switch } from 'react-router-dom';

function App () {
  return (
    <>
    	<BrowserRouter>
    		<Header />
    		<Switch>
    			<Route exact path='/'>
    				<Main />
    			</Route>
    			<Route path='/alarm'>
    				<Alarm />
    			</Route>
    			<Route path='/timer'>
    				<Timer />
    			</Route>
    		</Switch>
    		<Footer />
    	</BrowserRotuer>
    	
    </>
    );
}

Header와 Footer 컴포넌트를 Switch 놓음으로써 페이지가 바뀔 때도 재 렌더링 되지 않게 하는 것이다.

하지만 만약 Timer페이지에서는 Footer를 보여주지 않게 해주고 싶어도 그러지 못했다.

그러다 서칭을 하다가 다음과 같은 블로그를 찾았다.
특정 화면에서 Header숨기기 이를 기반으로 Footer를 숨겼다.

구현법

만약 Timer페이지에서 Footer를 숨기고 싶으면 Footer 컴포넌트에 아래와 같은 코드를 작성하면 된다.

// Footer.js

const Footer = () => {
  if (window.location.pathname === '/timer') return null;
  return (
    <>
    	...컴포넌트들
    </>
    );
}