코딩앙마 React JS CSS 작성법

CSS 작성은 여러가지가 있는데,

create-react-app으로 만든 프로젝트에는 별도 전용 패키지 설치 없이 바로 사용할 수 있는 방법 세가지가 있다.

 

1. 인라인 스타일 사용

CSS 파일을 사용할 필요 없이 HTML에 바로 적어주는 것.

여기서 스타일은 객체로 작성해야한다.

<div>
            <h1 style = {
{
    color : '#f00',  // 객체기때문에 쉼표로 구분
    borderRight : '12px solid #000',
    // 키는 CSS에서는 border-right라고 썼다면 여기서는 borderRight라고 쓴다
    marginBottom : '50px',
    opacity : 0.5,
}

            }>Hello</h1>
//중괄호 안에 중괄호 한번 더!

하지만 보통 특별한 경우가 아니면 인라인으로 CSS를 적는 일은 드물다.

 

2. index.css 파일 활용하기

전체 스타일링에 영향을 미치는 파일

 

app.css는 앱 컴포넌트에 한정된 내용들이 들어가있을 것만 같지만,

사실 app.css는 앱 컴포넌트에만 적용되는 것이 아니다.

app.css와 컴포넌트 자체 css에 따로 속성을 주어도 header에서 하나로 합쳐지기때문이다.

그래서 각 컴포넌트에 특화된 css가 필요하다

 

3. css module 활용

컴포넌트 폴더 안에 컴포넌트이름.module.css 파일을 만들어준다.

컴포넌트에서

import styles from "./컴포넌트이름.module.css";

위와 같이 import 해주고,

<div className={styles.box}>Hello</div>

클래스 네임에 {styles.클래스이름} 객체로 할당해준다.

 

 

App.css가 있는 곳에 App.module.css를 만들어준다.

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

위와 같이 import 해주고,

<div className={styles.box}>App</div>

 

클래스 네임에 {styles.클래스이름} 객체로 할당해준다.

 

컴포넌트별로 각각 적용된 것을 볼 수 있다!

 

장점 :

- 개발자도구에서 class명을 보면 해당 컴포넌트에 특화된 내용으로 들어가 있는 것이 확인된다.

그래서 동일한 내용으로 작성하더라도 중복될 걱정이 없다.

- CSS 크기가 커지면 가장 고민되는게 네이밍, 오버라이딩, 상속에 대한 부분인데 이 방식으로 말끔하게 해결 가능.

- Global에서 관리되는게 아닌 컴포넌트별로 관리되는 것도 장점이다.