React.js - JSX란? JavaScript + XML?

---

JSX란? JavaScript eXtension 이란?

---

 

안녕하세요.

고코더 입니다.

 

 

● 1. 오늘은 JSX에 대해 알아보려고 합니다.

이름도 조금 낯설지만 알고 보면 우리가 익숙하게 사용했던 언어와 많이 닮아 있습니다.  하나둘씩 알아가 보는 시간을 가져보겠습니다. 이번 시간에는 이론적인 부분만 학습하겠습니다.

 

● 2. JSX란 Javascript+XML의 합성어입니다. 

 다시 말하면 XML 사용을 허용하는 자바스크립트 확장 문법이라고 말합니다. 빌드 시 Babel에 의해 자바스크립트로 변환됩니다. 자바스크립트와 HTML을 표현할 수 있기 때문에 편리한 개발이 가능합니다. 자바스크립트 내부에 마크업 코드를 작성해줄 수 있습니다. 그리고 변수와 프로퍼티의 바인딩 기능을 제공합니다.

 

 

● 3. 개발자에게 익숙하고 편리합니다.

 

- HTML과 유사하게 정의되어 있는 구문을 사용합니다. 그리고 JavaScript로 작성될 수 있습니다.

- JSX는 컴파일에 최적화되었습니다. 좋은 성능으로 빠른 빌드가 가능합니다.

-. JSX,. JS라는 확장자를 사용합니다.

 

● 4. 공식 문서를 제공합니다.

- https://ko.reactjs.org/docs/introducing-jsx.html 리액트 공식 페이지에 한글로 해당 JSX를 자세히 알 수 있습니다.

 

● 5. Babel로 컴파일됩니다.

작성한 JSX 코드는 바벨에 의해 컴파일 과정이 거칩니다. 이러한 이유는 좀 더 가독성 있는 개발이 가능할 수 있기 때문입니다. 만약에 JSX가 없었다면 간단한 element를 생성 시에도 React.createElement를 호출해야 합니다. 

 

 

● 6. 반드시 JSX를 사용하지 않아도 됩니다.

하지만 리액트를 사용할때 JSX를 사용하지 않는 경우는 거의 보지 못한거 같습니다. 누구나 JSX 사용을 권장합니다. 왜냐면 이것을 사용함으로 실행 속도를 높이거, 가독성까지 확보할 수 있기 때문입니다. 또 익숙해진다면 쉽고 빠른 개발이 가능합니다. 

 

---

마무리

---

 

JSX가 있어서 쉬운 개발이 가능합니다.