[React] JSX

결, 꼬재랑 함께하는 레벨2 방학 스터디

 

React에서 사용하는 JSX란?

• JSX(JavaScript XML)는 JavaScript에 XML을 추가, 확장한 문법입니다.
• XML이란?

XML(eXtensible Markup Language)은 W3C에서 개발된, 다른 특수한 목적을 갖는 마크업 언어를 만드는데 사용하도록 권장하는 다목적 마크업 언어이다. XML은 주로 다른 종류의 시스템, 특히 인터넷에 연결된 시스템끼리 데이터를 쉽게 주고 받을 수 있게 하여 HTML의 한계를 극복할 목적으로 만들어 졌다.

HTML의 한계? HTML은 확장용이성, 구조용이성, 문서확인용이성 등에서의 한계가 나타났다. 사용자가 주어진 태그의 범위안에서만 문서내의 데이터를 다뤄야했기 때문이다. 따라서 XML이 나타나게 되었다.

• JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다.
• 바벨을 사용하여 일반 JavaScript 형태의 코드로 변환 된 후 브라우저에 적용된다.

 

JSX 관련 문법

JSX는 공식문서를 확인하자!!

JSX 이해하기 - React

JSX 이해하기 – React

 

JSX 관련 궁금증

JSX 사용법은 공식문서가 잘되어 있기 때문에 다음과 질문에 대해 알아 보도록 하겠습니다.

• #root를 미리 선언해놓는 이유는 무엇일까요?
• React는 들어본 것 같은데 react-dom은 무엇일까요?
• render가 하는 일은 무엇일까요?
• JSX와 표현식은 같을까요?
• JSX와 React.createElement() 는 무슨 관계일까요?
• document.createElement()와 다른 점은 무엇일까요?

<div id="root"></div>

import React from 'react';
import ReactDOM from 'react-dom'

const element = <h1>Hello, world!</h1>;

ReactDOM.render(element, document.getElementById('root'));

 

#root 를 미리 선언해 놓은 이유는 무엇일까요?

ReactDOM.render(element, document.getElementById('root')); React 코드를 보면 항상 다음과 같은 코드가 있는 것을 알 수 있다. 여기서 root를 미리 선언해 놓고 ReactDOM.render에 대입해 주는데 그 이유에 대해 알아 보자.

 

ReactDOM.render()란?

• render()는 다음과 같이 사용되어 진다. ReactDOM.render(element, container[, callback])
• render()는 container(HTML 요소)에 element(HTML 코드)를 표시한다.
• render()는 container DOM에 렌더링 하는데 이전의 container DOM의 요소들을 비교하여 변경된 요소들만 Virtual DOM에 반영시킨 후 실제 DOM을 변경 시킨다.
• <div id="root"></div> 은 ‘root’ DOM node라고 부르며 보통 하나의 root DOM node를 가진다. id 값을 root라고 쓰는 것은 표준 규칙이다.

 

render가 하는 일은 무엇일까요?

• 즉 render()는 Virtual DOM을 생성해서 이전의 요소들과 비교 후 화면은 업데이트 시킨다.

 

React는 들어본 것 같은데 react-dom은 무엇일까요?

• ReactDOM은 Virtual DOM에서 HTML을 생성하는데 필요한 라이브러이다.
• ReactDOM은 React Element를 브라우저에 렌더링 하는데 필용한 모든 도구들을 가지고 있다.

 

JSX와 표현식은 같을까요?

• JSX는 표현식이므로 JavaScript 객체로 인식된다.
• 표현식으로 인식이 되므로 변수에 할당 할 수 있고, if문 안에 사용할 수 있으며, 함수의 반환값으로 사용된다.
• JSX 내부에서는 문을 사용할 수 없다. 왜냐 값이 아니기 때문이다. 그리고 삼항연사자는 표현식이기 때문에 JSX 내부에서 사용할 수 있다.

 

JSX와 React.createElement()는 무슨 관계일까요?

• JSX는 컴파일 후 React.createElement()의 결과로 생성된 값과 같은 형태로 바뀐다.

 

document.createElement()와 다른 점은 무엇일까요?

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

// React.createElement
let element = React.createElement(component, props, ...children)

• 인자 값과 작성 방식이 다르다.

document.createElement

• DOM 요소를 반환한다.(div, span, ...)

React.createElement

• DOM 요소를 나타내는 객체를 반환한다.

const element = React.createElement("h1");

{
	type: 'h1',
	props: {}
}

• DOM 요소 자체가 아닌 객체를 반환하는 이유는 React가 가상 DOM을 사용하기 때문이다. 가상 돔은 UI의 표현이 메모리에 유지되고 실제 DOM에 반영된다.

---

JSX 이해하기 - React

JSX 이해하기 – React

React Tutorial

React Tutorial App

[React.js] JSX와 XSS(Cross Site Scripting) 공격

[React.js] JSX와 XSS(Cross Site Scripting) 공격

ZeroCho Blog

https://www.zerocho.com/category/HTML&DOM/post/587f50b1308ed50018a00d51