[React] JSX 문법 3가지

 

---

 

 

 

1. 리액트는 JSX이기 때문에 'class'가 아니라 'className'을 사용한다.

import './App.css';

function App() {
  return (
    // className을 사용한다.
    <div className="App">
      <div className="black-nav">
        <h4></h4>
      </div>
    </div>
  );
}

export default App;

 

 

2. 중괄호({}) 문법을 사용하여 데이터를 바인딩한다.

import './App.css';

function App() {
  let post = '제목'

  return (
    <div className="App">
      <div className="black-nav">
        <h4>블로그</h4>
      </div>
        // 중괄호 문법을 사용한다.
        <h4>{ post }</h4>
    </div>
  );
}

export default App;

 

 

3. style은 style={} 문법으로 사용하며, 카멜 케이스이다.

import './App.css';

function App() {
  let post = '제목'

  return (
    <div className="App">
      <div className="black-nav">
        // style를 사용할때는 {}로 감싸며, object 형태로 넣는다.
        <h4 style={ { color: "red"} }>블로그</h4>
      </div>
        <h4>{post}</h4>
    </div>
  );
}

export default App;

 

 

---

 

출처

React 리액트 기초부터 쇼핑몰 프로젝트까지! - 코딩애플 온라인 강좌