[React] JSX (Javascript Syntax eXtension)

JSX (Javascript Syntax eXtension) 

- Javascript 확장한 문법이다.  

- JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다.  

- 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.
- JSX는 하나의 파일에 자바스크립트와 HTML을 동시에 작성하여 편리하다.  

- 자바스크립트에서 HTML을 작성하듯이 하기 때문에 가독성이 높고 작성하기 쉽다.(주관적인 관점)

 

출처: https://goddaehee.tistory.com/296 [갓대희의 작은공간:티스토리]

[React] 2. JSX란? (정의, 장점, 문법)

 

---

JXS 문법 3개

 

1. className

: class를 넣을땐 'class'가 아닌 'className' 사용

 

2. { 변수명 }

: 변수명을 넣을 땐 중괄호 사용 { 변수명 } 

 

3. style={ {이름: '값'} }

: style을 넣을 땐, 중괄호 안에 Object 자료 형식으로 넣어줘야 함.

 

출처: 코딩애플