[React] css에 대해 알아보자 [바닐라 css]

목차

 

React에서는 css 스타일링의 방법이 여러가지가 있다

그 중에서 바닐라 css 여러 사용방법과 장단점에 대해 알아보자

 

바닐라 css

우리가 잘아는 바닐라 css로 아래와 같이 사용한다.

import "./Lecture3.css";
//이런식으로 불러서 사용
import Lecture2 from "./Lecture2";

function Lecture3() {
  return (
    <div>
      <p>hello world</p>
      <Lecture2></Lecture2>
    </div>
  );
}

export default Lecture3;

 

문제점

css규칙들은 컴포넌트에 속하지 않기 때문에 스코핑이 되지 않는다

이해하기 어렵다면 아래 코드를 보면 된다.

function Lecture2() {
  return (
    <>
      <p>hello world2</p>
    </>
  );
}

export default Lecture2;

//Lecture3.css
p {
  color: red;
}

import "./Lecture3.css";
import Lecture2 from "./Lecture2";

function Lecture3() {
  return (
    <div>
      <p>hello world</p>
      <Lecture2></Lecture2>
    </div>
  );
}

export default Lecture3;

출력 화면

이런식으로 예상과 달리 Lecture2 컴폰넌트의 hello world2도

폰트컬러가 빨간색이 된것을 볼 수 있다.

 

 

 

해결방안 -> 인라인 스타일 사용하기

아래 코드와 같이 해주면 jsx요소에만 영향을 미치게 된다.

import "./Lecture3.css";
import Lecture2 from "./Lecture2";

function Lecture3() {
  return (
    <div>
      <p style={{ color: "red" }}>hello world</p>
      <Lecture2 ></Lecture2>
    </div>
  );
}

export default Lecture3;

 

 

단점
하지만 모든 요소를 개별적으로 스타일해야 한다는 단점이 존재하게 된다.

또한 css코드와 jsx코드의 구분이 사라지게 된다.

 

장점

아래와 같이 동적인 css 적용이 편리하다

import "./Lecture3.css";
import Lecture2 from "./Lecture2";
import { useState } from "react";

function Lecture3() {
    const [display, setDisplay] = useState(false);
  return (
    <div>
      <p style={{ color: display? "red" : "green" }}>hello world</p>
      <Lecture2 ></Lecture2>
    </div>
  );
}

export default Lecture3;

 

 

css클래스를 활용한 동적인 스타일링

//Lecture3.css
.label.display{
    color: green;
}

import "./Lecture3.css";
import Lecture2 from "./Lecture2";
import { useState } from "react";

function Lecture3() {
    const [display, setDisplay] = useState(true);
  return (
    <div>
      <p className={`label ${display ? 'display' : 'none'}`}>hello world</p>
      <Lecture2 ></Lecture2>
    </div>
  );
}

export default Lecture3;

 

css모듈을 이용한 스코핑 해결

무조건 className으로만 지정해준다.

//Lecture3.module.css
.hello{
    color: green;
}

import styles from "./Lecture3.module.css";
import Lecture2 from "./Lecture2";
import { useState } from "react";

function Lecture3() {
    const [display, setDisplay] = useState(true);
  return (
    <div>
      <p className={styles.hello}>hello world</p>
      <Lecture2 ></Lecture2>
    </div>
  );
}

export default Lecture3;