[번들링과 웹팩] (2) - 리액트와 웹팩

선정·2022년 7월 26일

Today I Learned

리액트 개발에 꼭 필요한 라이브러리

리액트 개발에 도움이 되는 라이브러리

리액트 개발에 꼭 필요한 라이브러리

react

React는 React 라이브러리의 진입점이다. <script> 태그를 사용하여 React를 불러오게 되면 전역 객체 React를 통하여 최상위 API를 사용할 수 있다. 리액트 컴포넌트와 Hooks, 라이프 사이클에 대한 정보가 모두 들어있다.

react-dom

react-dom 패키지는 앱의 최상위 수준에서 사용할 수 있고 필요한 경우 React 모델 외부로 나갈 수 있는 탈출구로 사용할 수 있는 DOM 관련 메서드를 제공한다. 또한, client와 server에 특화된 모듈인 react-dom/client, react-dom/server를 제공한다.

DOM 관련 메서드를 제공한다는 것을 볼 때, react-dom는 리액트 코드와 html를 연결하는 역할을 한다는 것을 알 수 있다. 이를 react-dom/client의 메서드 중 createRoot()를 통해 알아보자.

CRA를 통해 생성한 리액트 앱을 기준으로 리액트 컴포넌트와 연결되는 html 코드는 public/index.html 파일에, react-dom 라이브러리를 호출해 html 파일에 연결하는 코드는 src/index.js에 있다.

src/index.js에서 react-dom/client를 import한다. 그리고 createRoot 메서드를 호출해 container(id값으로 root를 가진 요소)에 리액트 루트를 만들어 반환하고, render를 통해 리액트 요소를 DOM으로 렌더링한다.

Babel

Babel은 자바스크립트 컴파일러이다. 리액트의 JSX 문법을 브라우저가 읽을 수 있는 JavaScript로 변환하는 역할을 하기 때문에 리액트 개발에 필수적이다.

Babel 공식 홈페이지의 try it out 메뉴를 통해 아래와 같이 jsx 코드가 babel을 통해 어떤 식으로 변환되는지 확인할 수 있다.

import React from "react"

function HelloWorld() {
  return <div>Hello World!</div>
}

import React from "react";
import { jsx as _jsx } from "react/jsx-runtime";
function HelloWorld() {
  return /*#__PURE__*/_jsx("div", {
    children: "Hello World!"
  });
}