01. JSX (1) Intro

출처 - 리액트를 다루는 기술(김민준 지음)

---

1. 코드 이해하기

create-react-app 으로 만든 리액트 프로젝트 파일 알아보기!

src/App.js 최상단에는 다음과 같은 코드가 있다.

 

import React from 'react';
import logo from './logo.svg';
import './App.css';

 

번들러

번들러(bundler)는 Node.js 환경에서만 지원하는 module import, export 기능을 브라우저에서 사용하게끔 도와준다.

번들(bundle)은 묶는다는 뜻이므로, 파일을 묶듯이 연결해 준다.

 

웹팩

번들러의 종류에는 웹팩, Parcel, browserify 등의 도구 들이 있으며 리액트에서는 주로 웹팩을 사용한다.

웹팩의 편의성과 확장성이 다른 도구보다 뛰어나기 때문이다.

웹팩을 통해 SVG 파일이나 CSS 파일을 불러와서 사용할 수 있다.

---

2. JSX란?

JSX는 JavaScript XML 의 약자로, JavaScript를 확장한 문법이다.

XML은 HTML의 한계를 극복하기 위해 만들어진 마크업 언어이다.

 

function App() {
  return (
    <div>
      Hello, <b>React</b>
    </div>
  );
}

 

이러한 JSX 형식 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 JavaScript 형식의 코드로 변환된다.

 

3. JSX의 장점

(1) 보기 쉽고 익숙하다

결국 HTML 코드를 작성하는 것과 비슷하여 가독성이 좋다

 

(2) 활용도가 높다

JSX에서는 div, span 같은 HTML 태그를 사용할 수 있으며, 컴포넌트도 JSX 안에서 작성 가능하다