React 각 컴포넌트 별 CSS 적용

React 각 컴포넌트 별 CSS 적용

 

 

 

아래 코드를 보면서 문제 상황을 보자.

App.js

function App() {

    return (
        <div className="App">
            <div className="box">App</div>
            <Temp></Temp>
        </div>
    );
}

 

Temp.js

function Temp() {
    return (
      <div className="box">Temp</div>
    );
}

 

 

App.css

.box{
  width: 100px;
  height: 100px;
  background: skyblue;
}

 

아래는 화면 미리보기

 

App.css에 적은 코드지만 Temp.js에서 JSX로 작성한 코드에도 적용이 된다.

사실 이건 기존 HTML, CSS, Js를 사용해봤으면 당연한 것이다.

하지만 이렇게 되면, CSS가 많아졌을 때 보기가 너무 힘들 것이다.

 

아래와 같이 수정해보자.

 

App.module.css 생성

.box{
    width: 100px;
    height: 100px;
    background: skyblue;
}

 

App.js

import styles from "./App.module.css";
import Temp from "./Temp";

function App() {

    return (
        <div className="App">
            <div className={styles.box}>App</div>
            <Temp></Temp>
        </div>
    );
}

 

Temp.js

import styles from "./Temp.module.css"

function Temp() {
    return (
        <div className={styles.box}>Temp</div>
    );
}

 

Temp.module.css

.box{
    width: 100px;
    height: 100px;
    background: blue;
}

 

화면 미리보기

이렇게 하면 색이 다르게 보인다.

 

js 별로 위에 import 문이 있는 것을 보면 css 파일을 객체로 가져와서,

태그의 className 값으로 넣어주고 있다.

개발자 도구로 확인하면 각 컴포넌트 이름에 맞게 만들어져서 들어가있다.

 

이렇게 하면 css가 많아졌을 때도 클래스명이 같다는 이유로 css가 중복 적용 되거나,

원치않게 작동하는 경우를 방지할 수도 있으며

css를 컴포넌트 별로 관리할 수 있기 때문에 유지보수성이 뛰어나다.

여러 css에 걸쳐서 네이밍이 겹쳐도 상관없다는 점이 제일 좋은 것 같다.

안겹치게 잘 이름 짓는건 너무 어려웡...