React / JavaScript module.css 클래스 부여하기

리엑트에서 스크롤 다운을 하면 헤더에 변화를 주려 클래스를 부여하는데 잘 동작하지 않았다.

클래스는 module.css. 에서 불러오고 있어서 불러오면 변수로 넣어주니 잘 동작했다.

import React from 'react';
import HeaderNav from './HeaderNav';
import HeaderTop from './HeaderTop';

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


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();
  });

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