[React.js] JSX는 무엇인가

[React.js] JSX는 무엇인가

JSX는 Javascript XML의 약자로 '자바스크립트에 XML을 추가한 확장형 문법'이다.

가장 큰 장점은 자바스크립트에 HTML 문법을 사용할 수 있어 컴포넌트를 작성하기에 굉장히 확장성이 용이하다.

주로 리액트에서 많이 사용되며 다른 프론트엔드 프레임워크에서도 사용이 가능하다.

확장자는 .jsx, js를 사용 할 수 있으며 Typescript와 호환이 가능해 .tsx로 사용도 가능하다.

// JSX의 기본적인 문법.
// 자바스크립트에 HTML 태그를 사용할 수 있다!!!!
const myelement = <h1>React JSX</h1>;

React에서 JSX를 사용을 권장하는 가장 큰 이유는 다음과 같다.

'React는 JSX 사용이 필수가 아니지만, 대부분의 사람은 JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다고 생각합니다. 또한 React가 더욱 도움이 되는 에러 및 경고 메시지를 표시할 수 있게 해줍니다.' (React 공식 홈페이지 : https://ko.reactjs.org/docs/introducing-jsx.html)

리액트의 가장 큰 장점은 '무엇보다도 컴포넌트(Component) 방식의 화면 구성'이 아닐까 싶다.

컴포넌트 제작에 있어 Javascript에 HTML을 도입한다는 것은 굉장히 큰 작업 효율성을 나타낼 수 있다고 생각한다.

예를 들어 Vue Framework 같은 경우에는 Template 기반의 컴포넌트를 작성해 Javascript와 HTML이 따로 나뉘어진 형태로 유지보수에는 효율적이지 모르겠지만 처음부터 Javascript로 모든것을 작성한다는 점에 더 작업을 효율적으로 할 수 있다고 생각한다.(굳이 두번 일할 필요 없다고 봄...)

'React를 시작하는 사람들이라면 무조건 JSX 기반으로 작성된다.'로만 알고 React 개발을 시작한다고 생각한다.(물론 나도 그랬다...)

아직은 JSX의 문법의 대해 정확하게 이해는 하지 못했지만 기본적으로 언어도 글을 알아야 말을 하고 쓸 수 있기 때문에 무엇보다도 JSX의 장점 및 문법, 특징들을 알고나서 쓰면 더더욱 좋을 것 같아 이 글을 쓴다.