JSX란?
- 앞서, React를 쓸 때 React.createElement를 이용해서 UI에 요소를 표시한다는 걸 알았습니다. 하지만, 솔직히 너무 길고 지루한 문법이죠. 이러한 문제점을 해결하기 위해 리액트가 사용하는 특별한 문법을 JSX라고 합니다.
중요한 점은, JSX는 HTML처럼 보여도, HTML이 아니다! 라는 것입니다.
import React from "react";
const element = <div>this is JSX</div>이것이 JSX입니다, 원래 React.createElement를 코드로 나타내보면,
const element = React.createElemnt("div",{},"this is JSX")이렇게 되죠. 당연히 JSX 쪽이 읽기도 쉽고, 쓰게도 쉽습니다. 매번 React.createElement를 쓰지 않아도 되니깐 말이죠. 하지만, JSX는 항상 React.createElement로 변한다 라는 것을 항상 기억해 두어야 합니다. JSX는 브라우저가 읽을 수 없습니다. JSX를 읽기 위해서, 우린 babel 같은 다른 툴이 필요하죠.
이렇게 바벨이라는 툴이 JSX를 브라우저가 읽을 수 있게 JavaScript로 바꿔주는 역할을 하는 것입니다.
JSX를 쓰기 위해선 React가 필요합니다
- JSX를 쓰기 위해선 항상 JSX를 쓰는 자바스크립트 파일 안에 리액트를 불러올 필요가 있습니다. 왜냐하면, 결국 React.createElement()함수를 호출해야하기 때문이죠. 만약 React를 불러오지 않는다면, 에러가 날 것입니다.
import React from "react"; //꼭 불러와야함!
const element = <div>this is JSX</div>요약
- JSX는 UI를 쉽게 만들기 위한 리액트의 특별한 문법이다.
- JSX는 HTML과 비슷하게 보이지만 HTML이 아니다.
- JSX는 브라우저의 일부가 아니다, 그렇기에 JavaScript로 바꾸기 위한 툴이 필요하다.
- JSX는 꼭 React가 사용하는 파일 안에 있어야 한다.
- JSX로 코드를 쓰면 항상 React.createElement()로 바뀐다.
DreamingCoder