React useEffect로 body class넣기 / 리팩토링

 

🤔 처음에는 로그인 페이지만 분리해서 이렇게 적음

useEffect(() => {
    const isLogin = location.pathname === '/login';

    if(isLogin){
        document.body.classList.add('login_page');
    }
}, [location.pathname]);

 

 

🤔  근데 점점 분기처리할 게 생겨서 일단 저 방식으로 추가하고

       리팩토링을 어떻게 해야할지 생각해 봄

useEffect(() => {
    const isLogin = location.pathname === '/login';
    const isPasswordFind = location.pathname === '/PasswdReset';
    const isChangeCompany = location.pathname === '/change-company';

    document.body.classList.remove('login_page', 'password_page', 'change_company_page');

    if(isLogin){
        document.body.classList.add('login_page');
    }

    if(isPasswordFind){
        document.body.classList.add('password_page');
    }

    if(isChangeCompany){
        document.body.classList.add('change_company_page');
    }
}, [location.pathname]);

 

 

 

🔖👩‍💻 리팩토링

** map 기반 정리

useEffect(() => {
  const pathClassMap = {
    '/login': 'login_page',
    '/PasswdReset': 'password_page',
    '/change-company': 'change_company_page',
  };

  const className = pathClassMap[location.pathname];

  document.body.classList.remove(...Object.values(pathClassMap));

  if (className) {
    document.body.classList.add(className);
  }
}, [location.pathname]);

 

👩‍💻 document.body.classList.remove(...Object.values(pathClassMap));

=> 

Object.values(pathClassMap);
// ['login_page', 'password_page', 'change_company_page']
👉 객체의 value만 배열로 추출

=> class 이름으로 넣을 부분만 추출하여 삭제시킨다 (유지보수 좋음)

=> 각 class를 추가할 경우 누락시키는 경우도 있기 때문

 

 

다른 방법으로는 route 정보를 상수 객체로 분리하는 것도 고려했으나,

다른 파일에서 재사용하지 않고 분기 페이지 수가 적어서 map 기반으로만 리팩토링