React | JSX란? 렌더링 Rendering이란?

0. 들어가기에 앞서: React란?

JSX를 정리하기에 앞서 간단히 리액트를 정리해보자. 리액트는 페이스북이 만든 사용자 UI 구축을 위한 라이브러리이다. 하나의 단일 url을 가지고 SPA(Single Page Application)으로 사이트를 표현하는 것을 가능케하는 프레임워크다.

 

이 리액트는 3가지의 대표적인 특징을 가지고 있다.
1. JSX 문법
2. Component 기반
3. Virtual DOM

 

이번엔 먼저 JSX에 대해 알아보도록 하자.

1. JSX란

쉽게 말해 HTML 문법을 JavaScript 코드 내부에 쓴 것. 그것이 바로 JSX다!
어렵게 말해 JavaScript eXtension.. JavaScript의 확장 버전이고 결론은 자바스크립트이다.

 

"React에서 HTML을 표현할 때, JSX를 사용한다. 외관상 HTML같은 마크업 언어를 리터럴로 입력하는 것으로 보이는데, 빌드 시 Babel에 의해 자바스크립트로 변환된다. 자바스크립트 코드를 HTML처럼 표현할 수 있기 때문에 용이한 개발이 가능하다." (나무위키曰)

 

즉, JSX는 자바스크립트 안에서 HTML 문법을 사용해서 view를 구성할 수 있게 도와주는 자바스크립트 문법으로, 리액트 개발에 엄청난 도움을 주고 있다.

다음의 예제를 보자.

HTML이 .js의 변수에 저장되어 있다. 변수에 저장할뿐만 아니라 함수의 인자로도 넘길 수 있다.

JSX의 자세한 설명이 필요하다면 공식문서를 보고 다시 돌아오자.

 

2. JSX 사용 시 주의점

HTML을 JavaScript 내부에서 사용하는 것이므로 몇 가지 지켜야 할 규칙이 있다.

다음에서 하나씩 짚어보도록 하자.

---

3. JSX attribute

(1) 속성은 항상 쌍따옴표로 감싼다.

예를 들어, class를 주고 싶을 때 원래 속성명은 class이지만 JSX에서는 className을 사용해야 한다.

(2) 태그는 항상 닫혀있어야 한다.

HTML에서 input이나 br을 사용할 때 태그를 닫지 않는 경우가 있다. 하지만 리액트에서는 반드시 클로징 태그를 써줘야 한다.

(3) 어떤 태그라도 Self-closing tag가 가능하다.

항상 닫혀있어야 하기 때문일까....? 어떤 태그든 셀프 클로징이 가능하다.
다음과 같이 쓸 수 있다.

(4) 형제 노드를 작성할 수 없다.

아래 처럼 div가 이어진 형태로는 작성할 수 없다.

그래서 반드시 div나 Fragment태그로 감싸진 형태여야 한다.

(5) JSX 안에 자바스크립트 값은 다음과 같이 사용한다.

변수를 먼저 렌더 안에서 정의하고 리턴에서 변수명을 중괄호로 감싼 형태로 표현한다.

---

Element Rendering 엘리먼트 렌더링

html 요소(element), 또는 React 요소 등의 코드가 눈으로 볼 수 있도록 그려지는 것을 렌더링(rendering) 이라고 말합니다.

엘리먼트는 React의 가장 작은 단위입니다. 엘러먼트는 화면에 표시할 내용을 담고 있습니다. 브라우저 DOM 엘리먼트와는 다르게 React 엘리먼트는 일반 객체이며 쉽게 생성할 수 있습니다. React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트합니다. (공식문서)

React 요소가 DOM node에 추가되어 화면에 렌더되려면 ReactDOM.render 함수를 사용합니다. 첫 번째 인자에는 JSX로 React 요소를 인자로 넘기고, 두 번째 인자는 해당 요소를 렌더하고 싶은 container(부모요소)를 전달합니다.

위의 그림을 보면 전체 HTML이 업데이트 되는 것이 아니라 변화하는 부분의 엘리먼트만 바뀌는 것을 알 수 있습니다.