JSX의 정의와 원리에 대하여

1. JSX의 정의 

원래 프론트 코드는 화면을 띄우는 HTML, 그 HTML을 꾸미는 CSS, 프리젠테이션 로직을 담당하는 JS 총 3가지로 나뉜다. 이렇게 영역을 구분하여 작성하는 것은 때때로, 피로감을 유발한다. 왜냐하면, JS로 만든 모듈(특정 기능을 하는 코드)을 연결할 특정 HTML 요소(elements)와 연결하는 작업을 항상 해줘야하기 때문이다. 해당 작업을 위해 따로 코드를 작성해야 하기에 가독성이 더욱 안 좋아진다.
  JSX는 JavaScript & XML/HTML의 약자로, 위에서 보여진 프론트 엔드 전반의 약점을 보완하기 위해 만들어진 개념이다.  JSX에서는 Javascript 코드 안에서 HTML 코드를 작성하는 것이 가능하다. 따라서 밑과 같은 코드 작성이 가능해진다. 

const element = <h1> Hello, World! </h1>

이렇게 표현하면 JS 영역 안에서 프리젠테이션 로직 구현과  HTML을 이용한 화면 그리기가 모두 가능해진다. 그러면 어떻게 이러한 행위가 가능해진 것일까? 

2. JSX의 작동 원리

JSX는 내부 로직으로 JSX 문법으로 적혀진 코드를 랜더링 시에는 JS 객체로 바꾼다. 원시적인 JS 코드를 쓰던 시절을 기억 해보자. 우리가 프리젠테이션 로직을 짜다가, 특정 HTML 요소를 로직 도중에 추가해야할 일이 생겼다면, 어떻게 했는가? 

let element = document.createElement(tagName[, options]);

위와 같이 document의 createElement라는 함수를 이용하여 HTML에 접근해서 새로운 요소를 그렸다. JSX 문법은 JSX로 적힌 코드들을 랜더링 시에, 

React.createElement(
	type,
    [props],
    [... children]
)

위의 로직을 안 보이는 곳에서 자동으로 돌려 HTML과 JS를 분리하여 랜더링 시킨다.