다른 컴포넌트의 css가 적용되는 오류 (module.css로 해결)

❌ 오류: 내가 import하지 않은 css가 적용됨

리액트로 모달창 만들기를 하다가 뭔가 디자인이 마음대로 안되는 오류가 발생했다.

에러메시지가 뜬다거나 하는것은 아니지만 값을 바꿔줘도 계속 적용이 안되어서 이유를 찾다가

개발자도구를 보고 이유를 알게 되었다.

 

개발자도구를 보니 전혀 다른 컴포넌트의 css가 적용되고 있었다..!!

 

바로 각자 다른 컴포넌트안인데도, className이 겹치면

의도치 않게 내가 import하지 않은 다른 컴포넌트의 css가 적용되는 상황이 발생했다.

 

 

🔍 원인

css의 클래스 선택자는 전역으로 적용된다

전역으로 적용되기 때문에, 리액트에서는 다른이름의 컴포넌트를 import하지 않아도 css의 className이 적용될 수 있다.

 

 

 

✅ 해결

컴포넌트마다 고유한 클래스 이름을 사용하거나, CSS Module을 사용하여 스코프를 지정하여 CSS클래스의 충돌을 방지할 수 있다.

 

🔫  만드는 방법

1. .css ➡️ .module.css

css를 module.css로 확장자를 바꾼다

 

2. import를 새로 해준다

기존에 import from "./Search.css"를

아래와 같이 styles from을 쓰고 파일경로를 넣어준다.

import styles from "./Search.module.css";

 

3. className ={styles.클래스명}으로 작성한다.

 

 

⛔️ 주의할 점

module.css로 바꾸면 className은 케밥케이스로 작성하면 에러가 발생한다

 

 

➡️ 카멜케이스로 변경함.

 

 

⚠️ 만약 꼭 케밥케이스를 쓰고 싶다면 []안에 넣어준다. ⚠️

className ['company-logo']

 

 

⛔️ 주의할 점 2

반응형을 만들었다면 주의!!

module.css를 미리 적용한 것이 아니라, css를 거의 다 만든후에 적용을 하다보니 

이전에는 반응형이 잘 적용되던 것이 갑자기 안돼서 당황했다.

 

이유를 곰곰이 생각해보니, 아무래도 module.css로 각각 파일의 css를 구분짓다 보니 그런거같아서

@media로 반응형을 만들어준 css를 적절한 파일로 옮겼더니 다시 정상적으로 작동하였다. 😄

 

 

🕵️‍♀️ 느낀점

scss도 styled-component를 쓰지 않고 만들다보니,

생각지도 못한 오류를 자꾸 맞이하는것같다. 그래서 처음에 어떤 css관리도구를 쓸것이지를 결정하는 것이 정말 중요하다는 것을 깨달았다.

그래도 이렇게 별건 아니지만 몰랐던 문제들을 맞이하고 해결하면서 아,css는 전역으로 적용이 되는구나! 그래서 저런 관리도구들을 쓰는구나'도 알게 되었고 그런 것들의 해결법도 하나씩 배울수있어서 좋은 기회였다고 생각한다.