React / window.location 이용해 특정페이지 header에 클래스 부여하기

리엑트로 퍼블리싱중에 header를 투명하게 디자인했다.

근데 만들다 보니 서브페이지에서는 바탕이 흰색이라 보이지가 않았다...

평소같았으면 서브헤더를 하나 더 만들었을텐데 리엑트는 SPA로 라우팅설정이 되어 있어 헤더를 두개 만들면 안될것 같아서 

URL에 따라 클래스를 부여해줬다.

 

1. window.loaction 으로 URL을 가져와 조건문으로 클래스를 부여해줬다.

   하지만 상품 디테일페이지라 파라미터를 받아 데이터를 뿌려주기 때문에 고민하다가 정규표현식으로 파라미터 숫자를 없애버렸다 ㅋㅋ

   클래스네임을 가져올때는 module.css라서 저렇게 넣어줘야 css를 불러온다. 

   클래스네임을 가져올때 배열로 가져오기 때문에 지정해주거나 .item()으로 한번더 셀렉을 해줘야 된다

useEffect(() =>{
    const URL = window.location.pathname.replace(/[0-9]/g, "")
    const headerWrap = document.getElementsByClassName(header.header_wrap).item(0);
      if(URL === "/ItemDetail/"){
        headerWrap.classList.add(header.sub_header);
      }
  })

<Header.jsx>

import React, { useEffect } from 'react';
import HeaderNav from './HeaderNav';
import HeaderTop from './HeaderTop';

import header from '../../assets/css/common/header.module.css';
import Aside from './Aside';


export default function Header() {

  const scrollDown = () =>{
    const scrollTop = document.documentElement.scrollTop;
    const headerWrap = document.getElementById("header");
    if(scrollTop > 100){
      headerWrap.classList.add(`${header.scroll_down}`);
    }else{
      headerWrap.classList.remove(`${header.scroll_down}`);
    }
  }
  document.addEventListener('scroll', function() {
    scrollDown();
  });

  useEffect(() =>{
    const URL = window.location.pathname.replace(/[0-9]/g, "")
    const headerWrap = document.getElementsByClassName(header.header_wrap).item(0);
      if(URL === "/ItemDetail/"){
        headerWrap.classList.add(header.sub_header);
      }
  })

  return (
    <>
      <div className={header.header_wrap} id="header">
        <div className={header.inner}>
          <HeaderTop />
          <HeaderNav />
        </div>
      </div>
      <Aside />
    </>
  )
}

 

scrollTop 값을 가져와 그에 따른 클래스도 부여해줬다. 

다 구현하고 포스팅하려니 지우기 귀찮아서 그냥 같이 적었다. 

어차피 나만 보니까 ㅋ-ㅋ

모달이나 사이드바 같이 상단에 보여줘야하는것들은 루트에 포탈로 한다는데 난 헤더 바로 밑에 넣어봤다.

파라미터를 가지고 있어도 스타일이 잘 적용된다.