[React] JSX는 무엇일까?

일전에 어떤분에게 그런 질문을 받았다,
"css-in-js의 단점은 무엇일까요?"
나는 멍청하게도 jsx요? 라고 대답하였고 내 얕은 지식이 드러나게 되었다.

그래서 jsx와 css-in-js를 공부해보았고
일단 jsx부터 정리를 해보려 한다.

jsx문법이란?

React공식 문서에 따르면 jsx는 자바스크립트의 확장이라고 한다.
jsx는 React "엘리먼트"를 생성한다.

React는 본질적으로 렌더링 로직이 UI로직과 연결횐다는 사실을 받아들이고
별도의 파일에 마크업과 로직을 넣에 인위적으로 분리하는 대신에 둘다 포함하는 '컴포넌트'라고 부르는 유닛으로 사용한다.

물론 React에서 필수적으로 사용해야되는것은 아니지만 시각적으로 더욱 도움이 될거라고 한다.

그래서인가 React공식문서에서는 HTML보다는 JavaScript에 가깝다고 이야기 하며
어트리뷰트 이름대신에 카멜케이스를 이용하여 작성한다고 적혀있다.

예를 들어 class를 className으로 적는것처럼 말이다.

아래의 사진을 보면 좀더 이해가 쉽게 될거다.

그럼, JSX를 사용했을때의 장점은 무엇일까?

리액트 공식문서에 소개된 예시를 보자면

1. 주입공격을 방지한다.
   기본적으로 ReactDom은 JSX에 삽입된 모든 값을 렌더링하기 이전에 이스케이프 하는데
   애플리케이션에서 명시적으로 작성되지 않은 내용을 주입하지 않는다.
   그래서 모든 항목은 렌더링 이전에 문자열로 변환되고 이러한 특성으로 인해 XSS를 방지할수 있다고한다.
   
2. JSX는 객체를 포현한다.
   Babel은 JSX를 React.createElement() 라는 호출로 컴파일하게 되는데
   버그가 없는 코드를 작성하는 데 도움이 되도록 몇가지 검사를 수행하게 되고,
   다음과 같은 객체를 생성하게 된다.
   
   이러한 객체를 "React 앨리먼트" 라고 부르고, 화면에서 보고 싶은 것을 나타내는 표현이라 생각하면 된다. React는 이 객체를 읽어서, DOM을 구성하고 최신상태로 유지하는데 사용 한다.

지금까지 정리한 내용을 보면 말이 참 어려운것같은데..
쉽게 말해 React환경에서 보자면 html과 같은 dom문법을 사용하기 위한 것이라 볼수 있고
JSX덕분에 html문 속에 js의 변수를 사용할수 있게 되는것 같다.
잘못 생각한 부분이 있다면 앞으로 공부하면서 수정해야겠다.

끝.

-참고문서
1. React공식문서 v17.0.2 (JSX 소개)
2. 코드캠프 수업자료