[JSX] CSS 적용하기

.App{
  background-color: black;
}

h2 {
  color: red;
}

#bold_text {
  color: green;
}

 

App.css import 안하고 사용하기 ▼

 

// import "./App.css";

import MyHeader from "./MyHeader";

function App() {
  let name = "신상아";

  const style = {
    App: {
      backgroundColor: "black",
    },
    h2: {
      color: "red",
    },
    bold_text: {
      color: "green",
    },
  };

  const number = 5;

  return (
    <div style={style.App}>
      <MyHeader />
      <h2 style={style.h2}>안녕 리액트</h2>
      <b style={style.bold_text} id="bold_text">
        {number}는 : {number % 2 === 0 ? "짝수" : "홀수"}
        {/* JSX 중괄호와 함께 삼항연산자 활용하면 조건에 따라 각각 다른 요소를 렌더링 할 수 있음
        이런 방식의 렌더링을 '조건부 렌더링' 이라고 부름. 조건부 랜더링 굉장히 많이 사용함! */}
      </b>
    </div>
  );
}

export default App;

 

- 빈 배열 [ ] 리턴 안됨

- Bolean (true, false) 리턴 안됨