JSX 알아보기

JSX란?

'J'ava'S'cript + 'X'ML 의 줄임말로 JS를 확장한 문법이다.
React에서 다음과 같이 HTML과 유사한 코드를 사용 할 수 있게 해준다.

const jsx = <div>'J'ava'S'cript + 'X'ML</div>

이 때문에 가독성이 높아 편리하다.

import React from 'react';
//import 자리//
function Jsx() {
//JS 자리//
return(
//HTML 자리//
)
}
export default Jsx;
//export 자리//

위 내용처럼 각각의 부분이 가지고 있는 역할이 있다.
import와 export는 다음 포스팅에서 따로 다룰 예정이다.
return 을 사용하는 것이 JS 기반의 문법임을 보여준다.

유의점

유의점1 : JS 기반의 문법이기 때문에 camelCase를 사용해야 한다.

<camel_case>잘못된 예시</camel_case>
<camelCase>바른 예시></camelCase>

유의점2 : 최상위 요소는 단 하나만 있어야 한다.

function Jsx() {

return(
<div>1</div>
<div>2</div>
)
}
export default Jsx;

잘못된 예시

function Jsx() {

return(
<div>
<div>1</div>
<div>2</div>
</div>
)
}
export default Jsx;

바른 예시(형제요소가 있다면 바깥에 부모요소를 새로 만들어 감싸주자)