module.css 모듈 css의 중요성

오늘 차장님께 react에서 module.css의 중요성을 들었다.

책의 내용과 인터넷 검색 결과를 취합하여 나만의 것으로 만들어보고자 한다.

 

-모듈 css란?

: css를 불러와서 사용할 때 클래스 이름을 [파일이름]_클래스명_해시값 형태로 자동으로 만들어준다.

앞뒤로 파일명과 해시값이 붙어 자동으로 고유해지기 때문에, 흔한 이름으로 클래스명을 지정해도 괜찮다.

 

(이 스타일을 직접 불러온 컴포넌트 내부에서만 작동하기 때문)

 

<div className={ styles.wrapper }>

 

* 모듈로 적용한 스타일 명을 여러개 쓰고 싶다면?

 

<div className={ `${styles.wrapper} ${styles.wrapper}` }>

또는

<div className={ [styles.wrapper , styles.wrapper].join(' ') } >

(이건 처음알았다. 짱 신기하다)

 

 

* 모듈 css 안에서, 만약 특정 클래스명이 모든 페이지, 즉 전역적으로 사용되어야 한다면?

 

:global .example {  }

 

이렇게 글로벌 css임을 명시한다.

앞에 global을 붙여주고 작성하면 된다.

JSX에서 이 클래스명을 넣을때는 styles.클래스명 모듈 css 클래스명을 넣듯이 넣고,

이렇게 넣으면 웹페이지에서는 모듈이 붙지않고 그냥 문자열로 들어간다

 

* 만약 일반 css 파일에서 모듈 클래스명을 사용하고 싶다면?

 

:local .example {  }

 

이렇게 넣으면 모듈 css 처럼 쓸 수 있다

(이건 아직 잘 모르겠다. 해봐야겠다)

 

- class 라이브러리란?

 

css 클래스를 조건부로 설정 시 굉장히 좋은 라이브러리라고 한다.

module 사용 시에 이 라이브러리를 사용하면 굉장히 편리한 듯.

 

$ yarn add classnames

 

우선 터미널에서 이렇게 설치를 하고

(나는 npm을 써서 npm으로 설치했다)

 

import classNames from 'classnames';

 

라이브러리를 임포트한 뒤에

 

const MyComponent = ( { highlighted, theme } ) => (

    <div className={ classNames( 'MyComponent' , { highlighted } , theme  ) } > Hello </div>

);

 

myComponent를 선언하고, 파라미터로 hightlighted와 theme를 사용.

classNames를 사용해서

이 엘리먼트의 클래스에 highlighted가 true라면 highlighted 이 클래스가 적용될 것이고,

false면 적용되지 않는다. 

+ 전달받는 문자열은 내용 그대로 클래스에 적용된다

 

class라이브러리를 사용한 이 코드는, 사용하지 않은 아래와 같다

 

const MyComponent = ( { highlighted, theme } ) => (

    <div className={  `MyComponent ${ theme } ${ highlighted ? 'highlighted' : ' ' }`  } > Hello </div>

);

(사실 아직은 잘 모르겠다. 난 이게 더 가독성이 좋은 것 같은데... classNames 문법은 이해가 잘 안간다)

 

내가 직접 더 많이 해봐야할듯.