[React] JSX 문법

JSX: .js파일에서 쓰는 HTML 대용품

function App() {
  return (
    <div className="App"> // <- HTML이 아니라 JSX
      <div></div>
    </div>
  );
}

 

 

* 원래 리액트에서 <div> 만드는 방법

React.createElement('div', null, 'Hello World');

* JSX 사용시

<div></div>

 

 

1. JSX에서 CSS 사용 방법

class="" (x)  className="" (o)

 

2. CSS 파일연결

import './App.css';

 

** style 바로 넣을 때

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

• '-' 기호는 뺄셈기호라 사용x
• ex) font-size(x) fontSize(o)

 

3. 데이터바인딩

• { 중괄호 } 사용
  * 데이터바인딩: 변수 넣기
  ** 컨텐츠말고 id나 class값에도 줄 수 있음