React - React는 왜 사용할까

김형석·2022년 8월 8일

개념공부 스터디

목록 보기

26/27

프론트앤드 라이브러리와 프레임워크의 등장 배경

프론트앤드 라이브러리가 등장하게 된 이유는 동적인 웹 페이지를 보다 효율적으로 유지 보수하고 관리할 수 있도록 하기 위함이다.

동적인 페이지가 주를 이루는 요즘, 웹페이지라기 보다 웹 애플리케이션이라는 용어가 더 어울릴 정도로 유저 인터랙션을 처리하기 위한 상태 변화가 상당히 많아졌다. 이를 자연스러운 유저 인터페이스로 만들어주기 위해서 프론트앤드 라이브러리 / 프레임워크가 등장하게 된 것이다.

라이브러리와 프레임워크는 무엇을 도와줄까

웹 애플리케이션이라 불릴 만큼, 프로젝트 규모가 커지고, 다양한 유저 인터랙션이 전달된다면 그만큼 DOM요소들 또한 변화가 이루어져야 한다는 것과 같다. DOM 요소들이 변화한다는 것은 랜더 트리 재생성, 요소의 스타일 계산, 레이아웃 구성, 페인팅하는 과정을 거쳐야 한다는 것과 같다. 결국 유저 인터랙션이 전달되는 만큼, 이와 같은 과정이 반복되어야 한다는 것이다.

하지만, 이러한 과정이 반복되면 될수록 브라우저가 많은 연산을 해야 한다는 것이고, 이는 전체적인 프로세스의 비효율성을 야기한다. 또한, 많은 DOM 요소의 변화를 개발자가 직접 관리하는 것은 적지 않은 짐으로 다가오게 될 것이다.

결국, 프론트앤드 라이브러리, 프레임워크는 DOM 관리와 상태 변화 관리를 최소화하고, 개발자는 오직 기능 개발, 사용자 인터페이스에 보다 더 집중할 수 있고록 도와주는 것이며 이러한 목적을 가지고 다양한 해결 방식, 추구 방향을 가지고 각각의 프론트앤드 라이브러리, 프레임워크가 탄생하게 되었다.

그럼 왜 리액트를 사용할까

각각의 프론트앤트 라이브러리, 프레임워크들은 추구하는 방향과 특징들이 다르다.

리액트를 사용하기 때문에 리액트의 특징에 대해서 알아보자.

Component 단위 작성

컴포넌트는 UI를 구성하는 개별적인 뷰 단위로서, UI를 개발을 레고라고 한다면 컴포넌트는 블록 역할을 하게 된다. 이러한 블록을 조립해 하나의 완성품을 만드는 것과 같다. 이러한 특징은 하나의 컴포넌트를 여러 부분에서 사용할 수 있게 해준다.

이러한 특징은 생산성과 유지 보수를 용이하게 한다. 하나의 요소의 변화가 다른 요소들의 변화에 영향을 미치는 복잡한 로직을 업데이트하는 까다로운 작업에 경우, 컴포넌트의 재사용 기능으로서 보완할 수 있게 된다.

JSX

JSX는 자바스크립트의 확장 문법이다. XML과 매우 비슷하게 생겼으며, 이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환한다.

개발자가 마크업 코드에 익숙하다면 그것만으로도 JSX를 통해 컴포넌트를 구성하는 데 쉽게 적응할 수 있다는 장점이 있다.

아래 코드에서 return() 에 감싸져 있는 HTML 문법과 매우 유사한 코드가 바로 JSX이다.

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

const App = () => {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <h1 className="App-title">Welcome to React</h1>
      </header>
      <p className="App-intro">
        To get started, edit <code>src/App.js</code> and save to reload.
      </p>
    </div>
  );
};

export default App;

위와 같은 코드는 creata-react-app을 통해 리액트 프로젝트를 생성할 때 포함되어 있는 Babel이 아래와 같은 코드로 변환하여 컴파일 해준다.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _logo = _interopRequireDefault(require("./logo.svg"));

require("./App.css");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

const App = () => {
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "App"
  }, /*#__PURE__*/_react.default.createElement("header", {
    className: "App-header"
  }, /*#__PURE__*/_react.default.createElement("img", {
    src: _logo.default,
    className: "App-logo",
    alt: "logo"
  }), /*#__PURE__*/_react.default.createElement("h1", {
    className: "App-title"
  }, "Welcome to React")), /*#__PURE__*/_react.default.createElement("p", {
    className: "App-intro"
  }, "To get started, edit ", /*#__PURE__*/_react.default.createElement("code", null, "src/App.js"), " and save to reload."));
};

var _default = App;
exports.default = _default;