2. JSX

JSX
- Javascript 확장 문법, XML과 비슷
- 가독성이 높다
Ex)
var a=(

<div>

<h1>JSX</h1>

</div>)

- 반드시 부모요소로 감싸야한다.

  DOM 트리 구조 하나여야하기 때문

 

const(ES6)
- 변경 불가능한 상수

 

let(ES6)
- 동적인 값 저장

 

Ex)

const a = 'const'

<h1>{a}</h1>

 

- const와 let은 scope 영역에서 사용, var과는 다르다

 

JSX 내부의 if

- 삼항 연산자를 이용

Ex)
const a = true;
{ a ? 't' : 'f' }

 

null 이외의  false값 렌더링 할 시 && 연산자 이용

{ a && 't }

 

DOM 요소에 스타일 적용 시 문자열 적용이 되지 않으나 CSS 스타일을 Javascript 형식으로 적용 가능

- camelCase key 사용

Ex)

const style = {
backgroundColor : 'gray'
}

<div style={style}></div>

 

className 사용

Ex)

A.css
.my-div{
backgroundColor : 'gray'
}

 

A.js

import './A.css'

<div className="my-div"></div>

 

주석 처리는 {/*주석*'} 형식으로 한다.