17_리액트_CSS Module

className이 겹치지 않게 작성하는 팁

 

1. 컴포넌트 이름을 고유하게 지정

2. 최상위 엘리먼트의 클래스이름을 컴포넌트 이름과 똑같게 (대문자를 사용)

3. 그 내부에서 셀렉터 사용

 

 

CSS Module

 

CSS Module을 이용하면 이름이 겹치는 현상을 완벽하게 방지할 수 있다.

 

파일명에 .module.css를 붙이면 사용할 수 있다.

 

이러면 고유한 파일명등의 해시태그등이 붙어서 네임명이 고유화되게 된다.

 

 

레거시 프로젝트에 리액트를 도입하거나 CSS클래스 네이밍 규칙을 만들기 귀찮을때 굉장히 유용하다.

 

 

간단한 예시를 보자.

 

//CheckBox.js
import React from 'react';

function CheckBox( {checked,children , ...rest} ) {
    return (
        <div>
            <label>
                <input type = "checkbox" checked = {checked}{...rest}/>
                <div>{checked ? '체크됨' : '체크 안됨'}</div>
            </label>
            <span>
                {children}
            </span>
        </div>
    );
    
}


export default CheckBox;

 

//App.js
import React, { useState } from 'react'
import CheckBox from "./components/CheckBox";


function App() {
  const [check,setCheck] = useState(false);
  const onChange = (e) =>{
    setCheck(e.target.checked);
  }

  return (
    <div>
      <CheckBox onChange={onChange} checked={check}>다음 약관에 모두 동의</CheckBox>
    </div>
  );
}

export default App;

새 리액트 프로젝트를 만든 후 위코드를 작성하여

 

다음과 같은 간단한 예제를 만들었다. 이를 컴포넌트 스타일링을 통해서 꾸미는 작업을 해보겠다.

 

 

yarn add react-icons

먼저 react-icons를 설치해주자. 

 

https://react-icons.github.io/react-icons/

React Icons

위 홈페이지에서 정보를 볼 수 있으며 여러 아이콘들을 쓸 수 있다.

 

 

//CheckBox.js
import React from 'react';
import { MdCheckBox,MdCheckBoxOutlineBlank } from 'react-icons/md';

function CheckBox( {checked,children , ...rest} ) {
    return (
        <div>
            <label>
                <input type = "checkbox" checked = {checked}{...rest}/>
                <div>{checked ? <MdCheckBox/> : <MdCheckBoxOutlineBlank />}</div>
            </label>
            <span>
                {children}
            </span>
        </div>
    );
    
}


export default CheckBox;

다음처럼 코드를 추가해주고 결과를 보면

 

2번째 줄에 추가하고 싶었던 아이콘이 잘 추가된 것을 볼 수 있다.

 

 

/*CheckBox.module.css*/
.checkbox {
    display: flex;
    align-items: center;
}


.checkbox label {
    cursor: pointer;
}

.checkbox input {
    width : 0;
    height: 0;
    position: absolute;
    opacity: 0;
}

.checkbox span{
    font-size: 1.125rem;
    font-weight: bold;
}

.icon {
    display: flex;
    align-items: center;
    font-size: 2rem;
    margin-right: 0.25rem;
    color : #abd5bd;
}

.checked {
    color : #339af0;
}

componet 파일안에 해당 이름으로 파일을 만들어야 한다. 그래야 module이 고유하게 들어가게 된다.

 

styles를 찍어보게 되면 이름뒤에 고유값들이 붙어서 처리된것을 알 수 있다.

 

//CheckBox.js
import React from 'react';
import { MdCheckBox,MdCheckBoxOutlineBlank } from 'react-icons/md';
import styles from './CheckBox.module.css'

console.log(styles)

function CheckBox( {checked,children , ...rest} ) {
    return (
        <div className = {styles.checkbox}>
            <label>
                <input type = "checkbox" checked = {checked}{...rest}/>
                <div className = {styles.icon}>{
                    checked ? 
                    <MdCheckBox className={styles.checked}/> 
                    : <MdCheckBoxOutlineBlank />}</div>
            </label>
            <span>
                {children}
            </span>
        </div>
    );
    
}


export default CheckBox;

이후에 불러온 styles의 값들을 className으로 넣어주면

이쁘게 꾸며줄 수 있음을 알 수 있다.

 

 

이때 className이 여러개라면 전에 사용했던 classNames를 사용할 수 있다.

 

 

yarn add classnames

우선 모듈을 설치해주어야 한다.

 

 

//CheckBox.js
import React from 'react';
import { MdCheckBox,MdCheckBoxOutlineBlank } from 'react-icons/md';
import styles from './CheckBox.module.css'
import classNames from 'classnames/bind'

const cx = classNames.bind(styles);

console.log(styles)

function CheckBox( {checked,children , ...rest} ) {
    return (
        <div className = {cx('checkbox')}>
            <label>
                <input type = "checkbox" checked = {checked}{...rest}/>
                <div className = {cx('icon')}>{
                    checked ? 
                    <MdCheckBox className={cx('checked')}/> 
                    : <MdCheckBoxOutlineBlank />}</div>
            </label>
            <span>
                {children}
            </span>
        </div>
    );
    
}


export default CheckBox;

 

 

 

.module.scss로 이름만 바꾸면 scss환경에서도 사용할 수 있다.

 

 

css모듈 내부에서 global 클래스 네임을 설정하고 싶다면

 

:global .my-global-name {

}

위 형태로 선언하면 되고

 

 

 

module이아닌 css파일에서 local로 선언하고 싶으면 아래처럼 선언해주면 사용할 수 있다.

:local .make-this-local{

}