[react 리액트] 초간단 css 파일 모듈화, 동적 사용 (특정 컴포넌트 전용 CSS 파일 만들기)

 

1. css 파일명에 module을 추가한다.

*변경 전: Button.css

*변경 후: Button.module.css

 

 

 

2. 컴포넌트에 css import 구문을 수정한다.

*변경 전: import "./Button.css"

*변경 후: import styles from "./Button.module.css"

 

 

 

3. 컴포넌트에서 css 사용할 태그의 클래스명을 변경한다.

*변경 전 : className="button"

*변경 후: className={styles.button} 

 

import React from 'react';

import styles from './Button.module.css';

const Button = props => {

  return (

    <button type={props.type} className={styles.button} onClick={props.onClick}>

      {props.children}

    </button>

  );

};

export default Button;

 

 

 

4. 어떤 원리로?

브라우저에서 엘리먼트를 확인해보면 class명 뒤에 이상한 문자가 붙은 것을 확인할 수 있따.

리액트는 이렇게 css를 모듈화하면 고유한 랜덤문자를 붙여 해당 클래스를 특정함

 

 

 

5. 모듈화된 CSS 를 동적으로 사용하기

 

1) 먼저 모듈화된 css 에서 클래스명 없는 자식을 가진 부모 태그는 이렇게 표현

*예를 들면, 이런 상황 <div className="mom"><input /><button /></div>

className={styles['form-control']} // 스트링 클래스명을 대괄호로 감싼다.

 

 

 

2) 조건에 따른 동적으로 css 부여하기

*벡틱으로 감싸고 조건을 부여한다.

<div className={`${styles['form-control']} ${!isValid && styles.isValid}`}> //중간에 띄어쓰기 꼭 해주자

 

그지같지만 원리만 조금 이해하면 쉽게 작성할 수 있다.