CSSModule1

• react에서 css module로 다른 클래스와의 스타일이 충돌되는 것 방지하기 리액트에서 css 파일을 사용하면, 종종 해당 css파일의 스타일이 다른 컴포넌트의 요소에 적용되는 문제를 마주하게 된다. 이러한 문제를 해결하기 위해 styled-component를 사용하는 방법도 있지만, 내 경우는 css 형태를 유지해야 하는 이유가 있었기 때문에 간단하게 css module을 사용하기로 했다. css 모듈을 사용하면, 클래스 이름이 고유하게 변환되어, 같은 이름을 가진 클래스들 간의 충돌을 방지할 수 있다. 아래는 기존 css를 css 모듈로 변경하는 방법이다. 1. css파일 이름을 css모듈에 맞게 변경한다. 예를 들어 chatpopup.css가 기존 css이름이라면, 이름과 css 사이에 'module'을 넣어 다음과 같이 변경해야 한다. chatpopup.moule.css .. 개발 이야기/frontend 2023. 11. 6.