JSX 문법

JSX?

• https://ko.reactjs.org/docs/introducing-jsx.html

JSX 소개 – React

• JavaScript에서 HTML에서의 역할을 대신해준다.

기본 JSX 문법

• css파일은 App.js 상단에 import 'css 경로'로 css를 import 해준다.
• class가 필요한 경우 element에 class="class_name"이 아니라 className="class_name"으로 지정한다.
• 변수를 사용할 때는 중괄호를 사용한다. { variable_name }
• style을 사용할 때는 style={ { style_name: 'value', ... } } 형태로 사용한다.

// CSS import
import './App.css';

// class
<h1 className="class_name"> asdf </h1>

// variable
let test_var = 'Hello';
<h3>{ test_var }</h3>

// style
<p style={ { fontSize: '16px', color: 'red' } }> asdlkfjoiejwfoijwf </p>