너도나도 React를 쓰는 이유가 뭘까?

예빈·2023년 3월 15일

ETC

목록 보기

2/15

프레임워크 VS 라이브러리

Framework

프레임워크는 애플리케이션을 만들때 필요한 구조를 갖추고 있어 흔히 뼈대라 부른다. 개발자는 이 프레임 워크 위에 코드를 올리면 프로그램이 동작하므로 로직에만 집중할 수 있도록 한다. 많은 개발자들이 다 다른 방식으로 코딩하며 설계하면 관리에 혼동을 가지므로 프레임워크에 따라 개발하면 시스템의 일관성을 유지하고 통합하는데 큰 도움을 준다. 한마디로 프레임워크라는 맞춰진 틀에 내가 코드를 얹어 개발하는 것이다.

대표적으로 프론트엔드의 Angular(JavaScript), Vue.js 그리고 백엔드의 Spring(Java), Django(Python), Node js(Java Script)가 있다.

Library

Library는 도구다. 프로그램에서 사용할 코드, 함수, 자원의 집합으로 코딩할 때 활용하기 좋은 도구라 할 수 있다. 도구이기 때문에 내가 필요할때마다 불러와 유용하게 쓸 수 있다.

라이브러리의 종류는 엄청나게 많지만, 대표적으로 프론트엔드에 사용하는 React(JavaScript)가 있다. 흔히 프레임워크라고 생각하지만 사실 라이브러리다.

둘의 차이점은?

정확한 차이점은 제어 흐름이다. 누구에게 주도권이 있는지를 따져보면 된다. 라이브러리는 개발자가 호출하는 도구다. 코드의 흐름을 직접 제어하여 능동적으로 사용하는 것이다. 반대로 프레임워크는 뼈대라는 틀로 개발자가 그 틀 위에서 코드를 작성한다. 따라서 도구가 아니라 우리가 틀에서 수동적으로 사용하므로 제어 흐름이 프레임워크에게 있다.

리액트는 라이브러리

리액트(React)는 Facebook에서 개발한 사용자 인터페이스(UI) 라이브러리다. 컴포넌트 기반의 아키텍처를 사용하여 UI를 구성하며, 각각의 컴포넌트는 재사용성이 높아 코드의 유지보수와 개발 생산성을 향상시킨다. 또한, 가상 DOM(Virtual DOM)을 사용하여 UI를 빠르게 렌더링하며, 컴포넌트의 상태(state)가 변경될 때마다 필요한 부분만 업데이트하므로 성능이 우수하다. 리액트는 다른 라이브러리나 프레임워크와 조합하여 사용할 수 있으며, React Native를 사용하여 모바일 애플리케이션도 개발할 수 있다.

페이스북은 왜 리액트를 만들었을까?

리액트를 만들기 전에도 이미 Angular, Backbone, Knockout.js, Ember 등의 수많은 프레임워크들이 존재했다. 이 프레임워크들은 데이터단을 담당하는 모델(Model), 사용자의 화면에서 보여지게 되는 뷰(View), 그리고 사용자가 발생시키는 이벤트를 처리해주는 컨트롤러(Controller)로 이뤄진 MVC 패턴과 MVC 에서부터 파생된 MVVM(View Model), MVW(Whatever) 등의 패턴들로 이뤄져있다.

공통점은 모델이다. 방금 언급했던 프레임워크들의 모델은 대부분 양방향 바인딩을 통해서 모델에 있는 값이 변하면, 뷰에서도 이를 변화시켜준다. 여기서 핵심적인 부분은 변화시켜준다는 부분이다. 일단 첫 화면을 보여주고, 변화에 따라 필요한곳을 바꿔주는 것이다.

변화(Mutation)라는것은 상당히 복잡한 작업이다. 특정 이벤트가 발생했을 때, 모델에 변화를 일으키고 변화를 일으킴에 따라 어떤 DOM을 가져와서 어떠한 방식으로 뷰를 업데이트 해줄 지 로직을 정해줘야 하기 때문이다.

📣 그냥 Mutation을 하지 말자. 데이터가 바뀌면 그냥 뷰를 날려버리고 새로 만들어버리면 어떨까?

브라우저가 무슨 게임 엔진도 아니고, DOM 기반으로 작동하는 페이지를 그때 그때 새로 뷰를 만들면 성능적으로 엄청난 문제가 있을 것이다. 그래서 사용하는게 바로 Virtual DOM이다.

Virtual DOM은 가상의 DOM이다. 변화가 일어나면, 실제로 브라우저의 DOM에 새로운걸 넣는것이 아니라 자바스크립트로 이뤄진 가상 DOM에 한번 렌더링을 하고, 기존의 DOM과 비교를 한 다음에 정말 변화가 필요한 곳에만 업데이트를 해주는 것이다.

이 Virtual DOM을 사용함으로서 데이터가 바뀌었을 때, 어떻게 업데이트 할 지를 고민하는 것이 아니라, 그냥 일단 바뀐 데이터로 그려놓고 비교를 한다음에 바뀐 부분만 찾아서 바꿔준다.

리액트만 쓰라고 누가 협박했냐?

리액트는 Virtual DOM 을 성공적으로 사용한 선발주자다. 그리고 나서 Virtual DOM을 사용하는 라이브러리는 많아졌다. 대표적으로 Vue.js는 AngularJS의 단점을 보완하고, React의 가상 DOM 개념을 차용하여 개발했다. 그런데도 리액트가 특별한 이유는 뭘까?

1. Component

리액트는 화면에서 UI 요소를 구분할 때 '컴포넌트'라는 단위를 사용한다. 웹 애플리케이션의 여러 곳에 버튼이 필요하다면, 공통된 하나의 버튼 컴포넌트를 생성하고 그 컴포넌트를 필요한 곳에 가져다 사용할 수 있다. 이러한 특징은 생산성과 유지 보수를 간편하게 한다.

2. JSX

리액트는 HTML문법과 유사한 JSX를 통해 컴포넌트를 생성하기 때문에 가독성이 높고 작성하기 쉽다. JSX(Javascript + xml)는 자바스크립트에 XML을 추가해 확장한 문법이다.

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이 코드를 변환하여 컴파일 해준다.

3. Virtual DOM

리액트는 상태가 업데이트 되면, 업데이트가 필요한 곳의 UI를 Virtual DOM을 통해서 렌더링한다. 그 다음 리액트 개발팀에서 만든 매우 효율적인 비교 알고리즘을 통하여 실제 브라우저에 보여지고 있는 DOM과 비교를 한 후, 차이가 있는 곳을 감지해서 이를 실제 DOM에 패치시켜준다. 이를 통해서 기존 브라우저의 랜더링 과정보다 빠른 성능을 가진다.

결론적으로, React는 현재 프론트엔드 개발자들 사이에서 가장 많은 인기를 얻고 있으며 Facebook에서 지원하여 안정적이고 방대한 오픈 커뮤니티를 계속해서 구축해나가고 있다.