React - CSS 모듈?

 

 

 

 

 

 

컴포넌트를 폴더로 관리할 때

 

컴포넌트를 폴더로 관리하는 예

create-react-app 으로 생성한 프로젝트에서의 방법은 css 파일의 이름 뒷부분에 module을 붙여주는것이다.

 

그 다음, CSS를 적용할 컴포넌트에 import를 해준다.

 

 

 

원래는 이런식으로 import 했다면,

 

 

이런식으로 import 해준다!

 

navList 는 css파일에 선언된 클래스이름

 

그리고 클래스네임을 자바스크립트 오브젝트 처럼 사용한다!

 

이런식으로 하게되면,

css를 우리가 정해준 className으로 받는것처럼 보이지만 className이 임의로 생성된다고한다.

 

클래스 네임이 임의의 값으로 설정된 모습

보시다시피,

이렇게 하면 navList 라는걸 다른 파일에서 반복해서 사용 할 수 있게된다!

(원래는 클래스네임이 중복되면 문제가 발생했었음!!)

그리고 그 곳에서도 클래스 네임이 임의로 생성될것이다!

 

나쁘지않은 방법이지만, 최고의 방법은 아니라고한다.

 

단점 1 )

클래스네임에 "-" 과 같은것을 사용할 수 없다.

ex) nav-List

 

왜냐면 {styles.navList} 이런식으로 사용하게되는데,

{styles.nav-List} 이게 불가능하기때문!