react css 적용(보통 css 파일, css module)

CSS 파일 import 적용시키기

src 폴더 안에 css 폴더를 따로 만들어두고 그 안에 css 파일 작성 

 

적용 시키고자 하는 컴포넌트에 import 하기

 

단점: 서로 다른 컴포넌트가 같은 className으로 겹치는 경우 문제가 발생할 수 있음 

서로 다른 컴포넌트지만 className이 겹침

MyBox의 css

MyContainer의 css

위의 중복되는걸 막기 위해 사용되는게 css module 이다

---

CSS Module

중복되는 className을 막기 위해 임의의 className을 부여

 

CSS 파일에 파일명.module.css 이런식으로 module을 넣어준다.

module 넣기

 

그리고 적용하려는 컴포넌트에 임의의 import 명을 작성해주고 from 으로 경로를 명시하고

className에{ import명.className 명}을 입력하면 된다.

css module 설정

 

css module 설정

 

결과

개발자 도구로 확인해보면 명칭이 서로 다른게 확인된다.

 

만약 한 className 안에 여러 className의 css를 적용시키고 싶다면 {} 안에 `` 추가하고 ${}안에 className 작성

결과