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

은돌1113 2022. 3. 11. 11:56

728x90

React 스타일 조건부 렌더링

import './App.css'; import Hello from './Component/Hello'; const App = () => { const name = 'react'; return ( <> {name} ) } export default App; import React from 'react' const Hello = ({isSpecial, c..

www.crocus.co.kr

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;

728x90