CSS Module
CSS 파일을 불러와서 사용할 때, 클래스 이름을 고유한 값의 형태로 자동으로 만들어서 클래스명의 중복을 방지해주는 기술입니다.
파일명_클래스명_해시값 의 형태로 만들어줍니다.
파일명.module.css 확장자로 저장하기만하면 적용됩니다.
/* 고유 값으로 변환되기에 흔한 네이밍 사용가능 */
.wrapper{
...code
}
/* 전역 CSS 작성 예시 */
:global .wrapper{
...code
}모듈화 된 CSS 파일은 파일을 불러온 컴포넌트 내부에서만 작동합니다.
전역 CSS가 필요하다면 :global 키워드를 이용하면됩니다.
/* moduleName.module.css */
.wrap { ...code }// MyComponent.js
import moduleName from "./moduleName.module.css";
return(
<div className={moduleName.wrap}>
<div>
)
위와 같은 방식으로 Css Module 파일을 만들고 원하는 컴포넌트에서 import 해서 사용합니다.
_ 이후로 해시값이 들어간게 보이시죠? 위와같은 방식으로 파싱됩니다.
2개 이상의 스타일 적용하기 `` 백틱을 사용해야 합니다.
// MyComponent.js
import moduleName from "./moduleName.module.css";
return(
<div className={`{$moduleName.wrap} ${$moduleName.title}`}>
<div>
)
이 외에도 편한 사용을위해 classname 라이브러리, Sass와 함께 사용하기등 방법론이 있습니다.
Front End