JSX란

JSX(Javascript Syntax Extension)

마크업을 편리하게 작성하기 위해 등장한 문법.

js와 html을 합쳐놓은 것 같은 형태.

jsx 코드는 자바스크립트가 인식할 수 없는 문법이므로, Babel로 변환해야 함.

 

장점

1. html 태그를 그대로 사용할 수 있음

2. html 마크업과 js 로직을 같이 구현 가능

3. js 문법을 이용해서 html 생성 가능(별도의 html 파일이 필요 없음)

4. DOM과 Event를 사용하는 기존 방식보다 작성 편리

 

특징

1. 모든 jsx는 하나의 부모태그를 가져야 함.

// GOOD
function Hello() {
   return <h1>Hello</h1>
}

// GOOD
function Hello() {
   return (
   <>
     <h1>Hello</h1>
     <h2>Hello2</h2>
   </>
   )
}

// 오류 발생
function Hi(){
   return <h1>hi</h1><h2>hihi</h2>
}

2. 모든 태그는 self closing이 가능함

function Login() {
   return <div />
}

3. camelCase만 사용

4. JSX 내에서 자바스크립트 동작 가능