JSX문법 3가지

1. html에서 쓰던 class를 부여하고 싶을 떈

class대신 className을 사용해야 한다.

function App() {
  return (
    <div className="App">
      <div className="nav-bar">
      <h4>대충 멋있는 h4</h4>
      </div>
    </div>
  );
}

2. 변수를 넣고 싶을 땐 (데이터 바인딩)

중괄호를 사용하면 된다.

function App() {

let cool = "대충 멋있는 h4";

  return (
    <div className="App">

      <div className="nav-bar">
      <h4>{cool}</h4>
      </div>
    </div>
  );
}

3. style을 넣고 싶을 땐

style = {{스타일명 : '값'}}

function App() {

let cool = "대충 멋있는 h4";

  return (
    <div className="App">

      <div className="nav-bar">
        <h4 style={{ color : 'red' }}>{cool}</h4>
      </div>
    </div>
  );
}

콘마(,)를 사용하여 여러개의 스타일을 적용 할 수 있다.

function App() {

let cool = "대충 멋있는 h4";


  return (
    <div className="App">

      <div className="nav-bar">
        <h4 style={{ color : 'red', fontSize : '50px' }}>{cool}</h4>
      </div>
    </div>
  );
}