jsx { } 안에는 숫자 or 문자만 올 수 있다!
return (
<div style={style.App}>
<MyHeader />
<h2 style={style.h2}>안녕 리액트 {name}</h2>
<b style={style.bold_text} id="bold_text">
{number}는 : {number % 2 === 0 ? "짝수": "홀수"}
</b>
</div>
);
App.js
import React from 'react';
// import './App.css'; 외부스타일 주
import MyHeader from './MyHeader';
// 이러식으로 CSS 객체 만들고
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}>안녕 리액트 {name}</h2>
<b style={style.bold_text} id="bold_text">
{number}는 : {number % 2 === 0 ? "짝수": "홀수"} // 조건부 랜더
</b>
</div>
);
}
export default App;
