[react] JSX 구문 이해하기

"Do it! 리액트 모던 웹 개발 with 타입스크립트" 책을 정리하는 포스트입니다.

우분투 환경에서 진행함

 

React.createElement 호출의 복잡성 문제

createElement는 가상 DOM 객체를 만들어 주는 함수지만 HTML 요소가 부모/자식 관계로 구성되면 코드가 지나치게 복잡해진다.

 

<createElement 복습>

src/index.tsx 파일

import ReactDOM form 'react-dom/client'

//더 작성하기 쉬운 이름으로 고침
const CE = React.createElement

//가상 DOM (pVirtualDOM) 생성
const rootVirtualDOM = CE('ul',null,[
	CE('li', null, [
		CE('a', {href: 'http://www.google.com', target:'_blank'},[
			CE('p',null,'go to google')
		])
	])
])

//가상 DOM 객체를 부착할 물리 DOM 객체
const root = ReactDOM.createRoot(document.getElementByID('root') as HTMLElement)
//가상 DOM 객체를 물리 DOM 객체에 부착: 렌더링 (rendering)
root.render(rootVirtualDOM)

위 코드와 같이, 추가할 요소마다 createElement를 사용해서 중첩으로 가상 DOM을 생성해야 한다. 복잡!

 

이를 해결하고자 리액트 팀이 언어 확장의 형태로 JSX 기능을 자바스크립트 문법에 추가하였다.

JSX 코드를 사용하면, 자바스크립트 코드보다 그냥 HTML처럼 보이게 된다.

 

JSX 버전으로 변경

import ReactDOM form 'react-dom/client'

//가상 DOM (pVirtualDOM) 생성
const rootVirtualDOM = (
	<ul>
		<li>
			<a href= "http://www.google.com" target="_blank">
                <p>go to google</p>
			</a>
		</li>
	</ul>
)

//가상 DOM 객체를 부착할 물리 DOM 객체
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
//가상 DOM 객체를 물리 DOM 객체에 부착: 렌더링 (rendering)
root.render(rootVirtualDOM)

 

JSX = JavaScript + XML

위 예시처럼 JSX는 createElement를 간단하게 하기 위해서, 즉 가상 DOM 생성을 간단하게 하기 위해 고안된 것이다.

 

XML(eXtensible Markup Language)

HTML과 거의 비슷하다.

HTML, XML 모두 계산을 진행하는 프로그래밍 언어가 아닌 마크업 언어이다.

*마크업 언어: 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어

다른 점:

	HTML	XML
태그	끝태그 존재하지 않는 경우도 있음	항상 끝태그 (닫는 태그)존재
용도	웹 페이지 구조를 개발	다양한 플랫폼간에 데이터를 교환
기타	대소문자 구분X	자신만의 태그 정의가능 대소문자 구분

 

XML 구문에 자바스크립트 코드 삽입: 중괄호 사용 { }

자바스크립트 변수의 값을 XML 구문 안에 표현 가능

실행 결과

자바스크립트 변수의 값을 XML 구문 안에 중괄호로 씌워줌으로서 표현 가능하다.

 

 

암튼.. JSX 코드를 구성하는 한 줄 한 줄 모드 React.createElement 호출 코드로 변환이 된다!

 

 

배열과 JSX 구문

배열 [ ]에 JSX문들을 담을 수 있다. JSX은 단순화된 createElement 호출이므로 반환 값은 가상 DOM 객체이기 때문!

배열 외에 변수에도 JSX문을 담을 수 있다!

실행 결과 웹 브라우저는 중괄호 사용 결과와 같다.

개발도구 창 확인

 

 

JSX 요약

• JSX 구문은 단순화된 React.createElement 호출이다.
• 반환 값은 가상 DOM 객체이다.
• JSX 구문을 변수/배열에 담을 수 있다.

 

 

 

자료 출처

https://hanamon.kr/htm-xml-%EC%B0%A8%EC%9D%B4%EC%A0%90/

HTML과 XML의 차이점 - 하나몬