[React] JSX (JavaScript eXtension) 란?

 

 

 

React 는 페이스북이 만든 사용자 UI 구축을 위한

자바스크립트 라이브러리이다.

 

하나의 단일 url 을 가지고 SPA(Single Page Application) 으로

사이트를 표현하는 것을 가능케하는 프레임워크이다.

 

리액트는 대표적으로 아래의 3가지 특징을 가진다.

• JSX 문법 ✔
• Component 기반
• Virtual DOM

 

이 중 JSX 에 대해 자세히 살펴보자.

 

 

 

---

 

JSX 란?

JSX 는 자바스크립트를 홗장한 것으로 리액트에서 특화된 개념이으로,

" HTML 문법을 자바스크립트 코드 내부에 쓴 것 "을 말한다.

 

JSX는 리액트 엘리먼트(element)를 생성한다.

리액트에서 JSX 사용이 필수는 아니지만 자바스크립트 코드 안에서 UI 작업을 할 때,

이를 HTML 처럼 표현할 수 있기 때문에 용이한 개발을 할 수 있다.

 

간단하게 아래와 같은 예제가 JSX 이다.

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

 

 

JSX 사용 규칙

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

 

하나씩 자세히 살펴보자.

 

 

 

---

 

▪ 표현식 JSX

컴파일이 끝나면, JSX 표현식이 정규 자바스크립트 함수 호출이 되고

자바스크립트 객체로 인식된다.

 

즉, JSX 를 if 구문 및 for loop 안에서 사용하고,

변수에 할당하고, 인자로서 받아들이고 함수로부터 반환할 수 있다.

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

 

▪ JSX 속성 정의

속성에 따옴표를 이용해 문자열 리터럴을 정의할 수 있다.

또한 중괄호를 이용해 Attribute 에 자바스크립트 표현식을 삽입할 수 있다.

const element = <div tabIndex="0"></div>;
const element = <img src={user.avatarUrl}></img>;

💡 JSX 는 HTML 보다 자바스크립트에 가깝기 때문에,
React DOM 은 HTML Attribute 이름 대신 camelCase 명명 규칙을 사용한다.

 

▪ 태그

React 에서는 반드시 클로징 태그를 써줘야 한다.

또한 어떤 태그든 셀프 클로징 (self-closing) 이 가능하다.

<input> => <input />
<div></div> => <div />

 

▪ 여러 엘리먼트 렌더링

컴포넌트에서 여러 엘리먼트를 렌더링할 때는 꼭 컨테이너 엘리먼트 안에 포함시켜야 한다.

즉, 형제 노드를 작성할 수 없으며 반드시 div 나 Fragment 태그로 감싸진 형태여야 한다.

import React, { Component, Fragment } from 'react';

class App extends Component {
	render() {
    	return (
        	<Fragment>
            	<div></div>
                <div></div>
             </Fragment>
        );
    }
}

 

▪ 객체 표현

Babel (자바스크립트 컴파일러) 은 JSX를 React.createElement() 호출로 컴파일한다.

아래 두 예시는 동일하다.

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

 

React.createElement()는 버그가 없는 코드를 작성하는 데 도움이 되도록

몇 가지 검사를 수행하며, 기본적으로 다음과 같은 객체를 생성한다.

이같은 객체를 React 엘리먼트라고 한다. 리액트는 이 객체를 읽어서,

DOM 을 구성하고 최신 상태로 유지하는 데 사용한다.

const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

💡 DOM(Document Object Model) 은 웹 페이지를 이루는 태그들을

자바스크립트가 이용할 수 있게끔 브라우저가 트리 구조로 만든 객체 모델을 의미한다.

=> React DOM 은 Virtual DOM 에서 HTML 을 생성하는 데 필요한 라이브러리!

 

▪ 주석

주석을 사용하고 싶을 때는 {/**/} 이런 식으로 작성해야 하고,

컨테이너 엘리먼트 안에 포함되어야 한다.

 

 

 

 

 

© 참고

https://ko.reactjs.org/docs/introducing-jsx.html (React JSX 공식문서)

https://velog.io/@edie_ko/React-JSX%EB%9E%80-%EB%A0%8C%EB%8D%94%EB%A7%81-Rendering%EC%9D%B4%EB%9E%80 (JSX)

https://withseungryu.tistory.com/57 (React 가상 DOM)

JSX 소개 – React