CSS Module (React 컴포넌트 스타일링)

 

CSS Module은 CSS를 불러와서 사용할 때 클래스 이름을 고유한 값으로 자동으로 만들어서 컴포넌트 스타일 클래스

이름이 중첩되는 현상을 방지해 주는 기술입니다.

 

확장자는 .module.css 파일로 저장하기만 하면 CSS Module이 적용됩니다.

 

 

className이 하이픈(-)이 포함되어 있는 경우

import React from 'react'
import style from './style.module.css';
 
const Home = () => {
    return(
        <div className={style['header-image']}>
            <span>하이픈 포함되어 배열로 스타일링</span>
        </div>
    );
};
 
export default Home;

CSS Module이 적용된 스타일 파일을 불러오면 객체를 하나 전달받게 되는데 CSS Module에서 사용한 클래스 이름과

해당 이름을 고유화한 값이 키-값 형태로 들어 있습니다.

 

이 고유한 클래스 이름을 사용하려면 클래스를 적용하고 싶은 JSX Element에 className={style['클래스-이름']}

배열로 감싼 형태로 전달해 주면 됩니다.

 

 

 

className에 하이픈이 없는 경우

import React from 'react'
import style from './style.module.css';
 
const Home = () => {
    return(
        <div className={style.header}>
            <span>하이픈 미포함되어 배열로 스타일링</span>
        </div>
    );
};
 
export default Home;

 

클래스를 적용하고 싶은 JSX Element에 className={style.클래스이름} 형태로 전달해 주면 됩니다.

 

 

 

CSS Module을 사용한 클래스 이름을 두 개 이상 적용할 때

import React from 'react'
import style from './style.module.css';
 
const Home = () => {
    return(
        <div className={`${style.header} ${style.nav}`}>
            <span>Class 이름을 두개 이상 사용할 </span>
        </div>
    );
};
 
export default Home;

 

위 코드에서는 ES6 문법 템플릿 리터럴을 사용하여 문자열을 합해 주었습니다.

 

const name = '키다리';

const message = `제 이름은 ${키다리} 입니다.`;

 

여기서 사용되는 ` 문자는 백틱(Backtick)이라고 부릅니다.

 

 

CSS Module 클래스를 여러 개 사용할 때 템플릿 리터럴을 사용하고 싶지 않다면 다음과 같이 작성할 수도 있습니다.

 

className={[style.header, style.nav}].join(' ')}