DOM(Document Object Model) 웹 브라우저 내부에 구현된 html 태그 객체 웹 브라우저 내부의 DOM 객체들을 수정하면 화면에 그려진 웹 페이지 내용도 수정된다.

VirtualDOM 자바스크립트 코드에 의해서 생성된 html 태그 객체이다. Jsx 문법에 의해 생성되는 html 태그 객체는 VirtualDOM 객체이다.

Babel ES6문법을 웹 브라우저가 지원 안 할수도 있다. 그래서 ES6 문법의 자바스크립트 소스 코드를 옛날 문법의 소스코드로 변환해 주는 도구

Webpack 웹 페이지에 포함된 .js, .css 등 리소스 파일들을 하나로 묶어주는 번들링 도구.

확장 태그 구현 리액트 컴포넌트 클래스를 상속하여 확장 태그 클래스를 구현한다.(App.js) 확장 태그 클래스를 리액트 컴포넌트라고 부른다.

render 메소드 확장 태그 클래스에서 render 메소드를 구현해야 한다. 렌더 메소드는 확장 태그의 구체적인 형태를 구현해야 한다. 확장 태그의 내용은 html 태그나 다른 확장 태그들로 구성되어야 한다. 확장 태그의 형태는

render 메소드의 리턴값 확장 태그의 내용에 해당하는 태그 객체를 생성해서 리턴해야 한다. jsx 확장 문법으로 구현한다

확장 태그가 웹 브라우저에 렌더링 될 때 확장 태그의 render 메소드가 리턴하는 태그 객체로 치환되어서 그려진다. 치환된 태그에도 확장 태그가 포함되어 있다면, 그 확장 태그도 치환된다.(render 메소드 재귀 호출)

jsx 확장 문법 Html 태그를 생성하는 자바스크립트 소스코드를 간결하게 입력할 수 있도록 자바스크립트 문법을 확장한 것을 jsx 문법이라고 한다.

jsx 문법으로 구현한 표현식에는 반드시 루트 태그가 한 개 있어야 한다. 루트 태그가 없이 태그를 여러 개 나열하면 에러가 발생한다.