[React] 4. JSX란 무엇일까?

안녕하세요. 박기린 입니다.

이번엔 React 컴포넌트의 핵심 중 하나인 JSX에 대해 알아보겠습니다.

 

 

엄청 간단한 JSX

// React 컴포넌트의 JSX 부분

return (
	<div>
    	<h2>Let's get started!</h2>
        <Expenses items={expenses} />
    </div>
)

React 컴포넌트는 JSX라는 것을 사용합니다. JSX를 통해서 HTML 코드를 사용할 수 있게 된다는 것은 알고 있지만, 단순히 함수에 return() 안에다가 HTML 또는 컴포넌트를 입력만 하면 자동으로 홈페이지에 출력이 된다는 점이 아리송합니다. 과연 원리가 무엇일까요?

 

 

 

 

---

JSX의 원리 React.createElement()

create-react-app으로 만든 리액트 앱의 package.json을 가면, 위의 사진처럼 react, react-dom이라는 모듈을 확인할 수 있습니다. 이 두 모듈을 통해서 JSX라는 syntax sugar를 사용할 수 있게 됩니다.

 

 

 

import React from 'react';

옛날 React 프로젝트들은, 위와 같은 React 모듈 import 구문을, 모든 컴포넌트 JS 파일의 맨 처음에 써줬어야만 했습니다.

하지만 최근 버전에서는 이 과정도 생략할 수 있게 끔 업데이트가 되었습니다. 하지만 이 React 모듈에 JSX의 숨은 모습이 담겨 있습니다.

 

 

 

바로, 우리가 흔히 쓰는 JSX 구문은 React.createElement()라는 함수에 의해서 구현되는 것이었습니다.

 

 

React.createElement( 
	(오직 한 개의!) HTML element 또는 컴포넌트의 이름, 
	option object, 
	element안에 들어갈 콘텐츠
);

// option object 안에 props가 담긴다.

React.createElement()는 이러한 구조를 지닙니다.

이와 같은 React object와 method를 이용해서 JSX가 구현됩니다. 하지만 React 팀의 편의성 업데이트를 통해서 궃은 일은 리액트 내부에서 알아서 처리해줍니다. 그래서 우리는 굳이 이런 귀찮은 함수를 쓸 필요 없이, return() 안에 HTML 처럼 코드를 써내려 가면 됩니다.

 

 

 

 

---

한 가지 깨달음

그리고 이 내용을 이해하고 나면, 왜 항상 return을 할 때 하나의 element 만을 return하라고 하는 지를 알 수 있습니다.

React.createElement()는 하나의 HTML element 또는 컴포넌트 만을 첫 번째 인수로 받기 때문입니다.