React에서 조건부로 CSS를 렌더링하는 3가지 방법

새로운 반응 앱 만들기

npx create-react-app my-app
cd my-app
npm start

방법 1:

통사론

{[ your_class_name]: conditon}

예시

이 방법에서는 CSS 모듈을 사용합니다. 두 클래스를 병합하기 위해 clsx 라이브러리를 사용합니다.

clsx 설치

npm install clsx

이제 설치한 후 let dive intoApp.js

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

export default function App() {
  let title = true;
  return (
    <div className="App">
      <h1 class={clsx(styles.baseText, { [styles.heading]: title })}>
        Sample Heading
      </h1>
      <h1 class={styles.description}>Here goes description</h1>
    </div>
  );
}

styles.module.css

.baseText {
  font-size: 20px;
  color: yellow;
}

.heading {
  font-size: 28px;
  color: red;
}

.description {
  font-size: 18px;
  color: aqua;
}

링크

방법 2:

통사론

conditon && yourstyle

App.js

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

export default function App() {
  let title = true;
  return (
    <div className="App">
      <h1 class={clsx(styles.baseText, title && styles.heading)}>
        Sample Heading
      </h1>
      <h1 class={styles.description}>Here goes description</h1>
    </div>
  );
}

styles.module.css

.baseText {
  font-size: 20px;
  color: yellow;
}

.heading {
  font-size: 28px;
  color: red;
}

.description {
  font-size: 18px;
  color: aqua;
}

방법 3:

통사론

{`${condition}` ? "classname_1" : "classname_2"}

예시

App.js

import "./styles.css";

export default function App() {
  let title = true;
  return (
    <div className="App">
      <h1 class={`${title}` ? "heading" : "baseText"}>Sample Heading</h1>
      <h1 class="description">Here goes description</h1>
    </div>
  );
}

styles.css

.baseText {
  font-size: 20px;
  color: yellow;
}

.heading {
  font-size: 28px;
  color: red;
}

.description {
  font-size: 18px;
  color: aqua;
}

결과

Source code 이 자습서용