[React] React에서 CSS 사용하기 - eject, module css

CRA를 사용하여 프로젝트 생성하기

• HMR : Hot Module Replacement, 모든 종류의 모듈을 새로고침할 필요 없이 런타임에 업데이트 할 수 있다.

 

Package.json 살펴보기

// package.json
"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

"eject" : 내부에 숨겨진 모든 설정 파일들을 꺼내는 명령어

✅ Webpack, Babel 등의 설정을 변경하고 싶을 때 사용한다.

 

 

React에서 CSS 사용하기

1. 인라인 스타일 사용

import World from "./World";

export function Greeting() {
	return (
    	<Greeting>
        	<h1 style={{ color:"red", backgroundColor:"yellow" }}>Hi, yuns!</h1>
        	<World />
        </Greeting>
    )
}

 

2. CSS 파일 생성

이런 식으로 컴포넌트 한 개당 하나의 css 파일을 생성한다.

단, 이렇게 사용하면 css 파일들이 각 컴포넌트에 종속되지 않고, 헤드 부분에 기입된다. 
✅ 클래스명을 중복하여 사용할 수 없다. (오버라이딩)

 

3. css-module

각 컴포넌트에 특화된 css를 작성하여 사용할 수 있다.

 

css 파일 이름을 '(컴포넌트명).module.css'로 변경한다.

// Hello.module.css
.red {color: red;}

 

해당하는 컴포넌트에서 css 파일을 import 한다.

스타일을 적용할 Element의 className을 '{styles.(클래스명)}'으로 설정한다.

// Hello.js

import styles from "./Hello.module.css";

function Hello () {
    return <span className={styles.red}>Hello</span>
}

export default Hello;

---

🚀 참고

 

css 사용하기

• React JS #5 CSS 작성법(module css), 코딩앙마
• [React] CSS를 작성하는 방법들, css-module, sass, css-in-js

eject

• [React] create-react-app eject란?
• [삽질] - CRA의 eject - mystery

 

➰ 더 공부할 것

• style-component 복습하기