[React.js] 리액트 JSX

<JSX란?>

JSX란 리액트 컴포넌트에서 XML 형식의 값을 반환해주는 것을 의미한다.

<JSX의 동작 방식>

JSX의 동작 방식은, 리액트 컴포넌트 파일에서 XML 형태로 코드를 작성하면 Babel이 JSX를 Javascript로 변환해준다.

Babel: 자바스크립트의 문법을 확장해주는 도구. 아직 지원되지 않은 최신 문법이나, 편의상 사용하거나 실험적인 자바스크립트 문법들을 정식 자바스크립트 형태로 변환해줌으로서 구형 브라우저같은 환경에서도 제대로 실행할 수 있도록 해준다.

<JSX의 규칙>

1. 태그는 꼭 닫혀있어야 한다.
=> <div> 태그가 있으면 반드시 </div> 태그가 존재할 것, 혹은 self closing 태그를 사용할 것.
2. 두 개 이상의 태그는 무조건 하나의 태그로 감싸져야 한다.
=> 반드시 하나의 태그에서 시작된 트리 구조가 될 수 있도록 할 것. 애매한 경우 Fragment 태그(<>)를 사용할 수 있다.
3. JSX 내부에 변수 사용시 {}로 감싸준다.
4. 클래스명 지정시 'className=*'의 형태로 사용한다.

<div className='hi'>Hi</div>

5. inline style 설정 시 객체 형태로, snake_case가 아닌 camelCase를 사용한다.

const style = { backgroundColor: 'black', color: 'aqua', fontSize: 24, // 기본 단위 px padding: '1rem' // 다른 단위 사용 시 문자열로 설정 }

6. 주석은 {/* ~~~ */} 의 형태로, 열리는 태그 내부에서는 //를 사용해 작성한다.

{/* 이것은 주석입니다 */} <Hello // 열리는 태그 내부에서는 이렇게 주석을! />