IT/Spring

[React.js] 특정 화면에서 Header 혹은 Container 숨기기

최근에 간단한 페이지 구현 중에 헤더가 자꾸만 나타나서

여러가지 방법이 있겠지만 헤더 혹은 컨테이너같은 Wrapper를 특정 화면에서는 보이지 않게 하기 위한 방법을

나름대로 고민하고 삽질해본 결과 가장 간편하다고 생각되는 예를 공유하고자 합니다


Class 형 컴포넌트를 사용하시는 분들은 숨기고 싶은 컴포넌트(헤더, 컨테이너 등) 안에다가 아래 코드를 작성해주세요

render() {
  if (window.location.pathname === '/본인이 헤더 등을 숨기고자 하는 주소') return null;
  return <여기에 각자의 렌더 코드를 작성하시면 됩니다>;
}

위처럼 작성하시게 되면 성공입니다.

함수 컴포넌트에서도 크게 다르지 않습니다

Const Header = () => {
	if (window.location.pathname === '/본인이 헤더를 안보이게 하고자 하는 주소') return null;
    return (
    	<본인의 헤더 코드>
    );
}

거의 같죠?


너무 간단하지만 생각보다 귀찮아 하시는 분들을 위해 1초 팁 공유하고 떠납니다.

여담이지만 최근에 공부하는 것들을 전부 포스팅해서 본인의 것으로 만드시는 것은 물론이거니와

하나의 출판물로 만들어가시는 분들을 존경하고 또 뒤따르고 싶지만 실천력이 부족하네요

그래도 하나씩 공유해가며 행동력이 상승하길 바라며 이만 마치겠습니다