React를 사용하는 이유 ?

Gee·2022년 2월 8일

순수 자바스크립트를 배우고 Vue를 통해 작은 프로젝트들을 만들었습니다. 하지만,
Vue를 통해 프로젝트를 할 때 많은 제약사항들(정보 부족, 라이브러리 부족..)에 부딪히게 되었고 요즘 트렌드를 따라가기엔 React 프레임워크를 사용하는 것이 좋을 거 같다는 생각을 하였습니다.
그래서, React 공부를 시작하게 되었고 React는 어떤 문제를 해결하고자 나왔고, 어떤 방향성과 개발자들이 느끼고 있는 React의 공통적인 장점과 특징들을 정리해보고자 합니다.

🥳 프론트엔드 라이브러리와 프레임워크의 등장

모두가 아시다시피 요즘 페이지들은 정적인 페이지(사용자 중심이 아닌 정보만 보여주는 페이지)가 아닙니다. 웹 앱 혹은 웹 어플리케이션이라 불릴 정도로 복잡하고 동적으로 바뀌었습니다.
이처럼 복잡하고 동적인 웹 페이지가 늘어나고 웹의 크기가 커지자, 자바스크립트 파일의 관리가 어려워졌고 이를 효율적으로 관리하기 위해 그리고 UI를 더욱 동적으로 나타내기 위해서는 복잡하고 많은 상태를 관리해야 했습니다.
이를 위해서 프론트앤드 라이브러리 / 프레임워크가 등장하게 되었습니다.

🧐 프론트앤드 라이브러리/프레임워크는 어떤 것을 도와주나요?

프로젝트 규모가 커지고, 다양한 유저 인터랙션이 전달되는 만큼 DOM 요소들 또한 변화가 이루어져야 했습니다. DOM 요소들이 변화한다는 것은 랜더 트리 재생성, 요소의 스타일 계산, 레이아웃 구성, 패인팅 하는 과정을 거쳐야 한다는 것과 같습니다.
즉, 유저 인터랙션이 전달되는 만큼 이와 같은 과정이 계속 반복되어야 한다는 것입니다. ( DOM 변화에 의해 발생되는 브라우저의 동작원리를 알고 보시면 도움이 됩니다.)
이러한 과정이 반복되면 브라우저가 많은 연산을 해야하고, 불필요한 리소스를 낭비하게 됩니다.
프론트앤드 라이브러리/ 프레임워크는 DOM 관리와 상태 변화 관리를 최소화하여 불필요한 리소스 낭비를 더이상 하지 않게 도와줍니다.

그래서 왜 React야👂

프론트앤드 라이브러리 / 프레임워크 중 대표적으로 Angular, Vue, React가 있습니다. React를 선택한 이유에 대해서는 아래에 설명드리는 React의 특징과 설명들로 대체하도록 하겠습니다.

React 란?

페이스북에서 개발하고 관리하는 사용자 인터페이스(UI)를 만들기 위한 Javascript 라이브러리입니다.
리액트는 가상 돔(virtual dom)으로 UI를 빠르게 업데이트 해주고, 메모리에 가상돔을 올려놓고 이전과 이후를 비교하여 변경될 UI의 최소 집합을 계산해줍니다.

리액트의 특징👏

컴포넌트 기반의 화면 구성

리액트는 화면의 한 부분을 컴포넌트 라는 단위로 나누어서 관리할 수 있다. 대규모 웹 애플리케이션에서 컴포넌트의 역할과 기능에 따라 따로 관리하기 용이하며, 반복되는 부분을 공통적인 부분으로 분리하여 재사용성을 높여준다. 또 컴포넌트의 화면을 구성한다면 블록 쌓기처럼 컴포넌트를 쌓아서 빠르고 효율적으로 화면을 구성할 수 있다.

가상DOM으로 인한 빠른 속도🏃‍♀️

기존에는 DOM(Document Object Model)을 조작해서 브라우저에 화면을 나타내는 형식이었다.
자체의 성능은 느리다고 할 수 없지만 매번 DOM 전체를 직접 접근하여 변화를 주면 html, css, js파일 전체를 다시 리랜더링하기 때문에 느려질 수 밖에 없었다.
그래서 리액트는 가상 DOM 을 이용해서 실제 DOM을 조작하는 횟수를 줄여서 성능을 빠르게 개선하였다. 리액트에서 가상 DOM을 이용하는 방식은 다음과 같다.
데이터가 변경되면 리액트는 가상 DOM를 다시 변경한다. 그리고 이전의 가상 DOM과 비교해서 변경된 부분을 체크하고 변경된 부분만 실제 DOM에 적용한다. 이러한 리액트의 랜더링 방식은 DOM 전체를 매번 리랜더링했던 이전 방식의 비해 빠르게 애플리케이션의 규모가 클수록, 데이터의 변경이 많을수록 더 큰 힘을 발휘한다.

데이터 변경 -> 가상 DOM 리랜더링 -> 이전 가상 DOM과 비교 -> 변경된 부분 실제 DOM에 적용

오직 view에만 집 중 !

사용자 인터페이스를 만들기 위한 Javascript 라이브러리

다른 프론트엔드 프레임워크와 달리 리액트는 MVC 프레임워크가 아니다. Model, View, Controller 중에 리액트는 View만 제공한다. 그래서 프레임워크보단 라이브러리에 가깝다.
다른 부분은 리액트에서 제공하지 않기 때문에 다른 라이브러리를 사용해야 한다는 단점으로 생각할 수 있지만 반대로 상황에 맞는 라이브러리를 사용할 수 있어서 더 많은 문제를 해결할 수 있다. 리액트는 상태 관리 라이브러리로 Redux를 많이 사용하는데 Redux 는 MVC프레임워크의 양방향 상태 전이의 문제점을 피할 수 있다.
리액트는 Controller, Model를 사용하는 대신에 action -> dispatcher -> store의 단방향 데이터 흐름을 사용함으로써 MVC 패턴의 양방향 상태 전이의 문제점을 해결할 수 있다. 다른 프레임워크의 경우 MVC 패턴을 강제하기 때문에 리액트처럼 다른 라이브러리를 사용해 쉽게 문제를 해결하기 힘들다.