[React] useLocation으로 특정 페이지에서만 컴포넌트 띄우기

기본적으로 모든 페이지에 헤더 네비게이션 바가 보여지되, 로그인 페이지나 회원가입 페이지 등 일부 페이지에서는 헤더가 뜨지 않게 만들고 싶었다. 원래는 헤더가 보여져야 하는 페이지가 헤더 컴포넌트를 포함하게 코드를 짰더니 state가 따로따로 작동되지 않고 같이 작동되는 문제가 있었다.. (헤더의 검색창 클릭 상태가 true이면 보여지는 애니메이션이 있는데, 검색창이 true인 상태로 헤더와는 완전 별개인 메인 페이지에서 다른 state의 상태가 바뀌면 검색창 애니메이션이 자꾸 보여짐 ㅠ;)

처음에는 useState를 써서 모든 페이지가 로딩될 때 props를 넘겨줘야 하나 고민했지만.. 분명히 더 간단한 방법이 있을 거라 생각하고 검색의 늪으로 빠졌다..

 

찾아낸 방법은 useLocation을 쓰는 것!!! useLocation은 현재 페이지의 정보를 가져오고 싶을 때 사용한다.

보통은 useLocation을 이용해서 Link로 props를 주고 받는 것 같았지만 내가 하고 싶은 건 헤더를 보여주냐 마냐만 판단하면 됐으므로 현재 페이지의 주소값만 받아오면 된다.

useLocation이 반환하는 location 객체는 state, hash, pathname, search 등의 속성을 가지는데 여기서 pathname을 가져와 현재 페이지의 path가 미리 정해놓은 값일 경우 header 컴포넌트가 보이지 않게 만들었다.

 

const location = useLocation();
// 헤더가 없어야되는 페이지 배열
const noneHeaderPath = [
  "/Login",
  "/LoginPasswd",
  "/MissPasswd",
  "/NewPasswd",
  "/SignUp",
  "/WithDraw",
];

location 객체를 생성하고, 헤더가 보이지 않을 페이지의 pathname을 담은 배열을 미리 선언한다.

 

  const [naviSwitch, setNaviSwitch] = useState(true);

  useEffect(() => {
    if (noneHeaderPath.includes(location.pathname)) {
      setNaviSwitch(false);
    } else {
      setNaviSwitch(true);
    }
  }, [location.pathname]);

헤더의 유무를 판단할 state를 생성한 다음 useEffect를 통해 location의 pathname이 바뀔 때마다 state값이 바뀌도록 했다.

현재 pathname이 위에서 선언한 배열에 존재할 경우 false, 아닐 경우 true로 state값을 설정한다.

 

      {naviSwitch && (
        <div className="header">
          <Header></Header>
        </div>
      )}

return에는 이렇게 설정해주면 끝~~

 

로그인 페이지에는 헤더가 안뜨고

메인 페이지에서는 헤더가 뜬다!!