리액트 프로젝트에 css module 적용시키기

css module이란?

css은 모듈은 css를 전역적이지 않고 지역적으로 사용할 수 있게 만들어 줍니다. 가령 클래스 이름이 "App_app__1JlHe" 와 비슷한 형태로 되어 있는 것들을 본 적이 있으신가요? 이런 이름으로 되어 있는 것이 css module이 적용되어 있는 것입니다.  App은 파일의 이름이고, app은 클래스네임, 그리고 1JlHe은 랜덤으로 생성된 해쉬입니다. 이처럼 지역적으로 바꿔주면서 이름도 절대 안겹치도록 바꿔주기 때문에 많이 사용합니다.

간단히 말하면 css 파일에 .big이라는 값이 들어가 있더라도 파일이 다르면 둘은 다른 값이 됩니다. 

리액트에 적용시키기

리액트가 업그레이드 되면서 css 모듈을 적용시키는 방법이 장난아니게 쉬워졌습니다.

css 파일 이름과 확장자 사이에 module이라는 값만 넣어주면 됩니다.

app.js파일을 저렇게 바꿔주세요. css는 App.module.css가 되었습니다. css에도 값을 주도록 하겠습니다.

간단하게 값을 주었습니다. 이름이 css를 style이라는 객체를 통해 받아왔으니 style 값을 확인해볼까요?

{app: "App_app__1JlHe", blue: "App_blue__3bcio", greenColor: "App_greenColor__1H2ZC"}

저는 값을 확인해보니 이렇게 변해서 적용되어 있었습니다.

예전에는 eject를 해서 설정을 바꿔줘야 했던 것과는 아주 큰 차이가 납니다.

클래스를 지역적으로 사용할 수 있게되면 아무리 프로젝트가 커지더라도 이름 걱정은 할 필요가 없게됩니다. 이렇게 간편하게 사용할 수 있으니 꼭 사용해보시길 바랍니다.