[React] class동적으로 구현하기

react에서 CSS의 class를 동적으로 주는 방법을 알아보자

 

예제)

App.js

function App() {
  return (
    <div className="App">
      <div className='container'>
        Color
      </div>
    </div>
  );
}

App.css

.App {
  text-align: center;
}

.container {
  width: 500px;
  height: 200px;
  background-color: royalblue;
  font-size: 50px;
  color: #fff;
}

.red {
  background-color: red;
}

 

동적으로 구현하려면 className에 조건을 주어야 한다

조건을 주려면 가장 간단한 방법은 빈 state주어 true와 false값으로 on off 방식을 주는 것

function App() {

  const [onOff, setOnoff] = useState(false);
  
  return (
    <div className="App">
      <div className='container'>
        Color
      </div>
    </div>
  );
}

버튼을 누르면 className을 조건 따라 부탁하면 된다

function App() {

  const [onOff, setOnoff] = useState(false);

  return (
    <div className="App">
      <div className={onOff === true ? "container red" : null}>
        Color
      </div>
      <button onClick={() => {
        setOnoff(true)
      }}>버튼</button>
    </div>
  );
}

 

누르면

변경완료