[React] 조건부 스타일 렌더링

React 스타일 조건부 렌더링

---

React에서 특정 태그에 style 속성을 사용 할 때는 style={{}} 형식을 사용하는 데

여기에 조건을 추가하고 싶을 때는 {조건 ? {} : {}}으로 사용 해야 한다.

<span style={change ? { color: "red" } : { color: "blue" }}>world</span>

---

(전체 코드)

import React, { useState } from "react";

const Test = () => {
  const [change, setChange] = useState(false);

  return (
    <>
      <h2>
        Hello{" "}
        <span style={change ? { color: "red" } : { color: "blue" }}>world</span>
      </h2>
      <br />
      <p>현재 상태 : {change ? "true" : "false"}</p>
      <button onClick={() => setChange(!change)}>변경</button>
    </>
  );
};

export default Test;