JSX

JSX 문법

1. HTML 대신 사용

• class 대신 className으로 작성한다

<div className='abc'><div>

2. 데이터 바인딩 쉽게 가능하다

• 원래 데이터 바인딩을 하는 경우

//html파일
<div class='abc'></div>
//js파일
let abc =document.queryselector('.abc');
let n = 3;
abc.innerText = n;

• jsx로 데이터 바인딩
  • {}에 변수명, 함수명, 이미지 import 등 대부분 집어넣어 데이터 바인딩이 가능하다

// 바로 바인딩이 가능 
import img from './img.svg';
let n =3;

function example(){
	console.log('h');
}
<img src ={img}/> // 기존 src ='./img.svg';
<div>{n}</div> // 3 
<div>{example}</div> // 'h'

• css의 경우 object자료형으로 만들어 사용 가능하다
  • font-size 처럼 중간에(-)가 있을경우 연산자로 인식을 하기 때문에 생략하고 대문자로 이어붙여 쓴다

let st = {color:'red',fontSize:'35rem'}; // 변수에 할당하여 사용할 수도 있다 
<div style = {{color:'red',fontSize :'35rem'}}> </div>