본문 바로가기
IT_Developers/React

React.js - JSX란? JavaScript + XML?

by 고코더 2021. 1. 17.

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가 있어서 쉬운 개발이 가능합니다.

 

댓글