React / aside 기능구현시 page이동 scrollstop 이슈

react로 퍼블리싱중 사이드바를 만들고 있었다.
aside를 오픈하면 딤드와 함께 뒤에 scroll을 막으려고 body에 클래스를 하나 만들고 overfolw:hidden과 height:100%를 주었다.
문제는 사이드바 링크를 통해 다른페이지로 이동하면 body에 클래스가 그대로 있는것이다.
useEffcet로 화면 렌더링이 한번되면 클래스를 없애주도록 하였다.
근데 나는 상품리스트 페이지였는데 같은 페이지에서 다른 카테고리로 가니 이슈가 발생하여 파라미터가 바뀌면 없어지도록 하였다.

useParmas로 파라미터를 체크한 후 바뀌면 사이드바를 닫는 함수를 실행시켰다.

import React, { useEffect} from 'react'
import { Link, useParams } from 'react-router-dom';

const params = useParams()

useEffect((e) => {
  handleClose();
  console.log("동작")

  },[params])

전체코드 길어서 보기 복잡하다 ㅋㅋ

import React, { useEffect} from 'react'
import { Link, useParams } from 'react-router-dom';
import aside from '../../assets/css/common/aside.module.css'

import useLoginCheck from '../Hook/useLoginCheck';

export default function Aside() {
  const isLogin = useLoginCheck()
  const loginChk = isLogin.isLogin
  const userId = sessionStorage.getItem("user_id");
  const params = useParams()

  const handleLogout = () => {
      sessionStorage.removeItem('user_id')
      document.location.href = '/'
  }
useEffect(() =>{
  let listTitle = document.getElementsByClassName(aside.list_title);
  let i;

  for (i = 0; i < listTitle.length; i++) {
    listTitle[i].addEventListener("click", (e) => {
      e.target.classList.toggle(aside.checked);
      let listItem = e.target.nextElementSibling;
      if (listItem.style.maxHeight) {
        listItem.style.maxHeight = null;
      } else {
        listItem.style.maxHeight = listItem.scrollHeight + "px";
      }
    });
  }
},[])

const handleAide = (e) =>{
  const asideWrap = document.getElementsByClassName(aside.aside_wrap).item(0);
  const deemed = document.getElementsByClassName(aside.deemed).item(0);
  document.body.classList.add(aside.stop)
  asideWrap.classList.add(aside.aside_actve)
  deemed.classList.add(aside.on)
}
const handleClose = (e) =>{
  const asideWrap = document.getElementsByClassName(aside.aside_wrap).item(0);
  const deemed = document.getElementsByClassName(aside.deemed).item(0);
  const listItem = document.getElementsByClassName(aside.list_item)
  const listTitle = document.getElementsByClassName(aside.list_title)

  document.body.classList.remove(aside.stop)
  asideWrap.classList.remove(aside.aside_actve)
  deemed.classList.remove(aside.on)
  let i 
  for(i=0; i < listItem.length; i++){
    listItem[i].style.maxHeight = null;
  }
  let j
  for(j=0; j < listItem.length; j++){
    listTitle[j].classList.remove(aside.checked)
  }
  
}
useEffect((e) => {
  handleClose();
  console.log("동작")

  },[params])

  return (
    <>
      <div className={aside.deemed}></div>
      <div className={aside.aside_btn} onClick={handleAide}>
        <img src="/assets/images/aside_btn.png" alt="" />
      </div>
      <div className={aside.aside_wrap}>
        <div className={aside.close_btn} onClick={handleClose}>
          <img src="/assets/images/close.png" alt="" />
        </div>
        <div className={aside.inner}>
          <div className={aside.aside_top}>
              {loginChk ? 
              <>
                <div className={aside.user_info}>
                  <span>{userId}님 반갑습니다.</span>
                  <Link to="/" onClick={handleLogout}>로그아웃</Link>
                </div>
                <div className={aside.user_btn}>
                  <Link to="/"><img src="/assets/images/like.png" alt="" /><span>찜</span></Link>
                  <Link to="/"><img src="/assets/images/cart.png" alt="" /><span>장바구니</span></Link>
                  <Link to="/"><img src="/assets/images/profile.png" alt="" /><span>마이페이지</span></Link>
                </div>
              </>
              :
              <>
              <div className={aside.user_info}>
              <span>로그인을 해주세요</span>
                <div>
                  <Link to="/login">로그인</Link>
                  <Link to="/register">회원가입</Link>
                </div>
              </div>
              <div className={aside.user_btn}>
                <Link to="/"><img src="/assets/images/like.png" alt="" /><span>찜</span></Link>
                <Link to="/"><img src="/assets/images/cart.png" alt="" /><span>장바구니</span></Link>
                <Link to="/"><img src="/assets/images/profile.png" alt="" /><span>마이페이지</span></Link>
              </div>
            </>
              }
          </div>
          <ul className={aside.list}>
              <li>
                <div className={aside.list_title}>
                  <div><button>쇼핑</button><span>shopping</span></div>
                  <span className={aside.list_title_icon} ></span>
                </div>
                <ul className={aside.list_item}>
                  <li><Link to='/Itemlist/all'>전체보기</Link></li>
                  <li><Link to='/Itemlist/best'>베스트</Link></li>
                  <li><Link to='/Itemlist/new'>신상품</Link></li>
                  <li><Link to='/'>라인별</Link></li>
                </ul>
              </li>
              <li>
                <div className={aside.list_title}>
                  <div><button>브랜드</button><span>brand</span></div>
                  <span className={aside.list_title_icon}></span>
                </div>
                <ul className={aside.list_item}>
                  <li><Link to='/'>브랜드 소개</Link></li>
                </ul>
              </li>
              <li>
                <div className={aside.list_title}>
                  <div><button>이벤트</button><span>event</span></div>
                  <span className={aside.list_title_icon}></span>
                </div>
                <ul className={aside.list_item}>
                  <li><Link to='/'>진행중인 이벤트</Link></li>
                  <li><Link to='/'>지난 이벤트</Link></li>
                </ul>
              </li>
              <li>
                <div className={aside.list_title}>
                  <div><button>리뷰</button><span>review</span></div>
                  <span className={aside.list_title_icon}></span>
                </div>
                <ul className={aside.list_item}>
                  <li><Link to='/'>리뷰</Link></li>
                  <li><Link to='/'>포토리뷰</Link></li>
                </ul>
              </li>
              <li>
                <div className={aside.list_title}>
                  <div><button>스토리</button><span>story</span></div>
                  <span className={aside.list_title_icon}></span>
                </div>
                <ul className={aside.list_item}>
                  <li><Link to='/'>제품스토리</Link></li>
                  <li><Link to='/'>소셜채널</Link></li>
                </ul>
              </li>
          </ul>
        </div>
      </div>
    </>
  )
}