JSX

JSX (JavaScript XML)

: React에서 UI를 구성할 때 사용하는 문법으로 JavaScript를 확장한 문법

- 이 문법을 통해서 React 엘리먼트를 만들 수 있음

- 브라우저가 바로 실행 할 수 있는 자바스크립트 코드가 아님 (자바스크립트 확장 문법이긴 함)

- 이러한 이유 때문에 브라우저가 이해할 수 있는 자바스크립트 코드로 변환을 해줘야 함

 

- 이때 이용하는 것이 바로 'Babel'임 → Babel은 JSX를 브라우저가 이해할 수 있는 자바스크립트로 컴파일함

- 컴파일 후 자바스크립트를 브라우저가 읽고 화면에 렌더링 할 수 있음 

 

- React에서는 DOM과 다르게 CSS, JSX 문법만을 가지고 웹 애플리케이션을 개발 할 수 있음

- 즉, 컴포넌트 하나를 구현하기 위해서 필요한 파일이 줄어들었고, 한눈에 컴포넌트를 확인 할 수 있게 됨

-  JSX를 사용하면 자바스크립트만으로 마크업 형태의 코드를 작성하여 DOM에 배치할 수 있게 됨

 

- React에서는 JSX를 이용해서 앞서 보았던 DOM 코드보다 명시적으로 코드를 작성 할 수 있음 

- 자바스크립트 문법과 HTML 문법을 동시에 이용해 기능과 구조를 한눈에 확인 할 수 있음

- 이렇게 구조와 동작에 대한 코드를 한 뭉치로 적은 코드셋을 컴포넌트라고 함

 

- JSX 사용없이도 React 요소를 만드는 것은 가능하나 가독성이 떨어짐