(React)리액트 클래스에 조건문/리액트에서 클래스 다양한 방법으로 사용해보기/클래스명 여러개/className 여러개 일때/클래스에 변수 사용하기

import React, { useState } from "react";
import "./App.css";

const App = () => {
  return (
    <div
      className="container round"
    ></div>
  );
};

export default App;

파일명 : App.css

.container {
  width: 100px;
  height: 100px;
  border: 5px solid black;
}
.round {
  border-radius: 50%;
}

1-1. 적용된 화면 이미지

2. css module사용 X : className 여러개 + && 조건문 스타일

아래 코드에서 round 뒤에 "red"라는 클래스명이 있을 수 있으므로 띄어쓰기 한칸이 필요하다.

파일명 : App.js

import React, { useState } from "react";
import "./App.css";
const App = () => {

  const [color, setColor] = useState(true);
  // color변수가 false일 경우 "red"스타일은 적용이 안됨.
  return (
    <div
      className={"container round " + (color && "red")}
    ></div>
  );
};

export default App;

파일명 : App.css

.container {
  width: 100px;
  height: 100px;
  border: 5px solid black;
}
.round {
  border-radius: 50%;
}
.red {
  background: red;
}

위 코드에서 color라는 변수가 true일때는 "red"라는 클래스를 갖게되지만,

color라는 변수가 false일때는 "red"라는 클래스는 적용시키지 않는다.

조건부 연산자가 포함된 곳에는 괄호를 쳐줘야된다!!

** 연산자 우선순위로 인해 "&&" 이나 "? : " 연산자 보다 "+"연산자가 먼저 동작을 하게되어 ,

예상치 않은 결과를 만든다.

위 코드에서 조건부 연산자에 괄호를 넣지 않을 경우 빈 화면이 뜨게된다.

2-1. 적용된 화면 이미지

3. css module사용 X : className 여러개 + 삼항연산자 조건문 스타일

변수 ? "변수값이 true일 경우 적용할 클래스 이름" : "변수값이 false일 경우 적용할 클래스 이름"

적용하고 싶은 클래스가 없다면 "" 을 써주면 된다

예 ) 변수 ? "red" : ""

파일명 : App.js

import React, { useState } from "react";
import "./App.css";
const App = () => {

  const [color, setColor] = useState(false);
  //color변수가 false일 경우 "green"클래스의 스타일 적용.
  // true일 경우 "red"클래스의 스타일 적용.

  return (
    <div
      className={"container round " + (color ? "red" : "green")}
    ></div>
  );
};

export default App;

App.css

.container {
  width: 100px;
  height: 100px;
  border: 5px solid black;
}
.round {
  border-radius: 50%;
}
.red {
  background: red;
}
.green {
  background: green;
}

3-1. 적용된 화면 이미지

4. css module사용 O : className 여러개

파일명 : App.js

import React, { useState } from "react";
import styles from "./App.module.css";
const App = () => {

  return (
    <div
      className={`${styles.container} ${styles.round}`}
    ></div>
  );
};

export default App;

파일명 : App.module.css

.container {
  width: 100px;
  height: 100px;
  border: 5px solid black;
}
.round {
  border-radius: 50%;
}

4-1 적용된 화면 이미지

5. css module사용 O : className 여러개, className안에 변수 사용

파일명 : App.js

import React, { useState } from "react";
import styles from "./App.module.css";
const App = () => {

  const [color, setColor] = useState("");
  
  const colorChange = (colorName) => {
    setColor(colorName);
  };
  return (
    <>
      <div
        className={`${styles.container} ${styles[color]}`}
      ></div>
      <button onClick={() => colorChange("green")}>green</button>
      <button onClick={() => colorChange("red")}>red</button>
    </>
  );
};

export default App;

파일명 : App.module.css

.container {
  width: 100px;
  height: 100px;
  border: 5px solid black;
}

.red {
  background: red;
}

.green {
  background: green;
}

5-1. 적용된 화면 이미지

5-2. 적용된 화면 비디오

6. css module사용 O : className 여러개 + && 조건문

파일명 : App.js

import React, { useState } from "react";
import styles from "./App.module.css";
const App = () => {

  const [color, setColor] = useState(true);

  return (
    <>
      <div
        className={`${styles.container} ${styles.round} ${color && styles.red}`}
      ></div>
    </>
  );
};

export default App;

파일명 : App.module.css

.container {
  width: 100px;
  height: 100px;
  border: 5px solid black;
}
.round {
  border-radius: 50%;
}
.red {
  background: red;
}

6-1. 적용된 화면 이미지

7. css module사용 O : className 여러개 + 삼항연산자 조건문 스타일

파일명 : App.js

import React, { useState } from "react";
import styles from "./App.module.css";
const App = () => {
  const [color, setColor] = useState(false);

  return (
    <>
      <div
        className={`${styles.container} ${styles.round} ${
          color ? styles.red : styles.green
        }`}
      ></div>
    </>
  );
};

export default App;

파일명 : App.module.css

.container {
  width: 100px;
  height: 100px;
  border: 5px solid black;
}
.round {
  border-radius: 50%;
}
.red {
  background: red;
}
.green {
  background: green;
}

7-1. 적용된 화면 이미지

8. css module 사용 이유 관련 포스팅

https://eunhee-programming.tistory.com/203?category=1220652

CSS Module: css 클래스 이름 중첩 방지법/ CSS Module사용 이유

CSS Module: css 클래스 이름 중첩 방지법 * 이 포스팅은 복습을 위한 포스팅입니다. 리액트를 배우면서, CSS와 JavaScript에 대해서 더 알아갈 수 있는것 같습니다. 포스팅 요약: 1. CSS Module을 사용하는

eunhee-programming.tistory.com

저작자표시 비영리 변경금지