[JavaScript] DOM 접근을 통해 CSS Module의 className 가져오는 방법 (react.js, next.js)

Intro

안녕하세요. 이번 시간에는 DOM 접근을 통해 CSS Module의 classname을 가져오는 방법에 대해 알아보겠습니다 .

 

 

How to solve the problem

저는 next.js 에서 특정 className 을 가져와서 제거해줘야 했습니다. CSS Module을 사용했기 때문에 파일 컴포넌트마다 아래의 형식으로 styles을 가져와서 스타일을 적용해줬습니다. 

import styles from './styles.module.css'

 

참고로 css module 내부 프로세스는 css 클래스나 css 파일을 통해 그 클래스의 이름을 고유하게 바꿔주는 역할을 합니다. 따라서  import하는 모든 css 파일을 고유하게 만들어 줍니다. 더 자세한 내용이 궁금하신 분들은 이 글 [React 완벽 가이드] section 6 : 리액트 컴포넌트 스타일링에서 확인해주세요 :)

 

# Add

여기서 css 파일에서 정의한 특정 className을 DOM으로 가져오고 싶을 때는 아래의 코드를 사용하시면 됩니다. 

document.documentElement.classList.add(styles['full-width'])

 

# Remove

이와 반대로 특정 className을 제거하고 싶을 때는 remove() 메서드를 사용하여 동일하게 적용시켜주면 됩니다. 

document.documentElement.classList.remove(styles['full-width'])