React를 사용하는 이유

🙋🏻‍♂️프론트엔드 라이브러리 등장 배경

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

 

정적 웹 페이지

• 웹 서버에 저장되어 있는 HTML 문서를 클라이언트에게 전달하여 받은 페이지.
• 단순히 정보를 전달하기 위한 목적이기 때문에 로그인을 한다거나 뭔가 정보를 보낸다거나 하는 상호작용은 중요하지 않은 요소로 볼 수 있다.
• 사용자는 서버에 저장된 데이터가 변경되지 않는 한 고정된 웹 페이지를 보게 된다.
• 이런 경우엔 단순히 HTML과 CSS의 구성만으로도 웹 페이지를 만들 수 있다.
• Ex) 홈페이지에 회사소개, 음식메뉴, 포트폴리오 등 내용이 변하지 않고 고정적인 페이지.

 

동적 웹 페이지

• 요청 정보를 처리한 후에 제작된 HTML 문서를 클라이언트에게 전송하는 웹 페이지
• 사용자는 상황, 시간, 요청 등에 따라 달라지는 웹 페이지를 보게 됨
• 같은 페이지라도 사용자마다 다른 결과의 웹 페이지를 서버에 요청하고 받을 수 있음
• 우리가 보는 대부분의 웹 페이지는 동적 웹 페이지
• Ex) 네이버 블로그, 티스토리, 홈페이지 게시판 등

 

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

 

---

🙆🏻‍♂️프론트앤드 라이브러리 장점

웹 애플리케이션이라 불릴 만큼, 다양한 유저 인터랙션이 전달된다면

그만큼 DOM 요소들 또한 변화가 이루어져야 한다는 것과 같다.

DOM 요소들이 변화한다는 것은 랜더 트리 리렌더, 요소의 스타일 계산, 레이아웃 구성, 패인팅 하는 과정을 거쳐야 한다는 것과 같기 때문에 이러한 과정이 반복되면 될수록 브라우저가 많은 연산을 해야 한다는 것이고, 이는 전체적인 프로세스의 비효율성을 가져온다.

 

DOM 동작원리에 대해서는 이글 을 참고

 

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

 

 

---

Why React?

 

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

이글은 React를 중심으로 다루고 있다.

 

---

👉🏻React 특징

0️⃣Virtual DOM

리액트의 가장 큰 특징 중 하나이다.

기존의 DOM은 페이지가 바뀔 때마다, 새 HTML를 로드하면서 DOM 전체를 바꾸게 된다.

 

하지만 Virtual Dom은 React 컴포넌트가 리턴하는 값에 의해 만들어져서 실제 보이고 있는 DOM과 비교해서 달라진 부분만 찾아내어 바꾸게 된다. 이러한 Virtual DOM 때문에 React에서 컴포넌트 단위의 개발이 가능하게 되었다.

Virtual DOM 동작 원리

 

1️⃣React Native의 앱 개발 가능

웹과 앱은 엄청난 연관이 있다. 웹 프로젝트가 끝나 React 하나만 잘 활용하여도 React Native로 native moblie app을 만들 수 있기 때문.

 

2️⃣수 많은 커뮤니티

개발을 하다보면 막히는 부분, 오류가 있는 부분이 생기며, 오류에 대한 선행 해결법과 자료들은 문제해결에 있어서

큰 시간단축의 이점을 가져온다 이에 있어서 React는  facebook에서 만들어 계속되는 업데이트와 자료가 굉장히 방대하다.

 

3️⃣Component 단위 작성

컴포넌트는 UI를 구성하는 개별적인 뷰 단위로 서로서, UI 개발을 레고라고 한다면, 컴포넌트는 블록 역할을 하게 됩니다. 이러한 블록을 조립해 하나의 완성품을 만드는 것이다.

 

이러한 컴포넌트들을 나눠놨기에 다른 부분, 또 다른 웹에서 재사용이 가능해지며. 이는 생산성과 유지 보수를 용이하게 한다. 브라우저 화면상에 보이는 하나하나의 버튼, 탭, 아이콘 등이 모두 컴포넌트라고 보고 이 것들이 모여 하나의 뷰(VIEW)를 완성하게 된다.

 

4️⃣SPA(Single-Page-Application)

SPA(Single-Page-Application)이란 서버로부터 새로운 페이지를 불러오지 않고, 현재의 페이지를 동적으로 다시 작성하는 웹 애플리케이션을 의미한다. 하나의 HTML 페이지에 애플리케이션 실행에 필요한 Javascript, CSS 같은 모든 자산을 로드한다.

 

페이지 또는 후속 페이지의 상호작용은 서버로부터 새로운 페이지를 불러오지 않으므로 페이지가 다시 로드되지 않는다. 컴포넌트들이 모여 한 페이지를 작성하고, 특정 부분만 데이터를 바인딩하는 개념이다. 요청 URL에 따라 브라우저에서 해당 URL의 컴포넌트들을 호출한다.

페이지 갱신에 필요한 데이터만을 전달받아 페이지를 업데이트하므로 전체적인 트래픽이 감소된다.

 

5️⃣Client-Side-Rendering

React는 Client-Side-Rendering 방식으로 동작하고, SPA를 만들 수 있도록 지원하는 라이브러리이다. 기본적으로 HTML은 비어있고, Javascript가 동작하면서 데이터만을 주고 받아서 클라이언트에서 렌더링을 진행한다.

React 코드가 Javascript 코드로 변환 된 bundle.js를 갖고, 브라우저가 그 Javascript 코드를 실행해서 DOM을 그린다. 페이지 전체를 요청하지 않고 필요한 부분만 변경하게 하기 때문에, 모바일 네트워크에서도 빠른 속도로 렌더링이 가능하다.

하지만 서버에서 내려 받는 HTML은 비어있는 상태이므로, 검색 엔진 최적화(search engine optimization, SEO)에 불리하다는 단점이 있다.

 

6️⃣JSX

JSX(Javascript + xml)는 자바스크립트에 대한 확장 구문으로서, 리액트에서 element(요소)를 제공해 줍니다. 장점은 매우 다양합니다. 단순히 개발자가 마크업 코드에 익숙하다면, 그것만으로도 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;

덕분에 우리는 익숙한 HTML문법과 유사한 JSX를 통해 컴포넌트를 생성할 수 있게 된다.

 

 

📚출처/참고

https://gurtn.tistory.com/96

https://velog.io/@youthfulhps/React-React를-사용하는-이유