[React] JSX 이해하기

JSX

html 태그를 생성하는 자바스크립트 소스코드를 간결하게 입력할 수 있도록 자바스크립트 문법이 확장된 것

 

1) JSX 문법 예 

var s = <div><img src="image.png"/></div>;

 

=> React에서 다음과 같이 쓰인 코드는 @babel이라는 자바스크립트 컴파일러를 통해 다음과 같이 변환된다.

 

2) 위 jsx 문법 예제를 자바스크립트 소스코드로 변환한 결과

var s = React.createElement("div", null,
	React.createElement("img", {src: "image.png"})
);

프로젝트를 빌드할 때, 빌드 도구가 jsx 문법의 소스코드를 자바스크립트 소스코드로 자동 반환해준다.

 

확장자

jsx 문법을 포함하는 자바스크립트 파일의 확장자가 옛날에는 *.jsx, 최근은 *.js

 

DOM 객체 (Document Object Model)

웹 브라우저 내부에서 html 태그들은 객체 형태로 실행된다. 이 객체들을 DOM 객체라고 부른다. 즉, DOM 객체는 웹 브라우저 내부의 태그 객체이다.

 

VirtualDOM 객체

jsx 문법으로 구현된 자바스크립트 코드에서 생성한 html 태그 객체를 VirtualDOM 객체라고 부른다. 이 객체는 웹 브라우저 내부의 DOM 객체와 다르다. 

자바스크립트 코드에 의해서 생성된 VirtualDOM 객체들과 동일한 구조로, 웹 브라우저 내부 DOM 객체들을 변경하는 작업이 react.js 엔진에 의해 실행된다. 이 작업에 의해 jsx 문법으로 구현된 내용이 웹 브라우저 창에 그려지게 된다.