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

     

포스팅 목차

1. css module사용 X : className 여러개

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

---

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

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

---

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

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

---

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

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

---

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

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

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

---

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

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

---

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

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

---

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

---

 

최대한 다양한 방법을 보여드리려다 보니 목차가 길어졌네요

위에서 원하시는 파트 클릭하면 바로 그 파트로 이동 됩니다!! 참고해주세용!

---

 

1. css module사용 X : className 여러개

여러개를 정의할 때 "클래스명" + " " + "클래스명" + " " +"클래스명" 이런 형식으로 적용해야된다.

즉, 여러개를 정의할때는 " " <- 한칸씩 띄어쓰기를 해줘야 된다. 

 

파일명 : App.js

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사용 이유