JS와 JSX 사이의 차이는 무엇일까여 ?

https://stackoverflow.com/questions/33042923/what-is-the-difference-between-javascript-and-jsx

What is the difference between JavaScript and JSX?

 

공부 목적으로 번역하면서 공부한 글입니당.

 

 

JS is standard javascript, JSX is an HTML-like syntax that you can use with React to (theoretically) make it easier and more intuitive to create React components. 

JS는 표준 자바스크립트를 뜻하고, JSX는 사용자가 리액트를 사용해 더 쉽게, 좀 더 직관적으로 리액트 컴포넌트를 만들 수 있는  HTML식 문법을 말합니다. 

 

As the docs say, the only purpose is to make it easier to create React components... there's not much else there. Without JSX, creating large, nested HTML documents using JS syntax would be a large pain in the rear; JSX simply makes that process easier.

문서에서 볼 수 있듯이, 오직 리액트 컴포넌트는 만들기 쉽게하는 목적입니다. 그 외는 다른건 없습니다. 
JSX없이 JS문법을 통해서만 HTML 중첩 문서를 크게 만들때 엄청난 고통이 뒤에서 수반될겁니다.
JSX는 단지 그 과정을 쉽게 만들어줄 뿐입니다.

JSX In Depth – React

 

 

Outside of React you could also use either format, as long as the syntax is plain JavaScript, which can be run by browsers without transpiling.

순수 자바스크립트 문법을 사용하여 브라우저로부터 트랜스파일링없이 실행될 수 있게 한다면 React 밖에서도 두가지 포맷 다 사용 가능하다.

The JSX extension has been introduced to signify that the content of the file would include both JS as well as React’s XML-based tags within the content.

JSX 확장자는 파일의 내용이 자바스크립트와 React의 XML 베이스 태그들이 컨텐츠안에 포함되있다 것을 의미한다고 소개되어왔다.

It’s a semantic way to denote this is not plain JS and it requires transpiling. It is also useful when your editor supports syntax highlighting, as JSX may require slightly different color coding than plain JS.

 순수 자바스크립트가 아니고, 트랜스파일링이 필요하다는 걸 보여주는 의미론적 방법입니다. 그리고 또한 사용자의  에디터가 지원하는 문법 하이라이팅 기능에서 또한 유용한데, 예를 들면 JSX는 순수 자바스크립트와 살짝 다른 색상의 하이라이팅이 필요할 것입니다.