[React] 리액트는 왜 사용하는가 ?

youngminss·2021년 8월 26일
0

React

목록 보기
1/7

개요

이전까지 React를 단지 Javascript 로 프론트엔드 개발을 하는데 사용하는 라이브러리이고, 이를 통해 구현하는데 필요한 사용법만 알고, 빈 깡통을 들여다보는 느낌으로 다뤘던 것을 반성하며, React 란 무엇인지, 기본기부터 지나쳤던 개념들을 상기시키는 목적으로 시작해서 새로운 지식을 정리하는 시간을 가지려한다.

본론

🚀 그전에

그전에, 자바스크립트 는 현재 웹 애플리케이션에서 가장 핵심적인 역할을 할 뿐만 아니라, 확장하여 서버사이드, 모바일, 데스크톱 애플리케이션에서도 다양하게 사용하게되어, 이전에 단순한 연산을 하거나 시각적인 효과를 주는 단순 스크립트 언어란 이미지를 벗어난지 오래다.

앞선 이런 다양한 분야에서 자바스크립트를 효과적으로 사용하기 위해 여러 자바스크립트 프레임워크 들이 존재한다.

  • Vue.js, Angular, Ember.js, Backbone.js 등 이 있다.

이 프레임워크들은 주로

  • MVC 패턴 : Model-View-Controller
  • MVVM 패턴 : Model-View-View Model
  • Angular 의 경우는 MVW 패턴: Model-View-Whatever

의 아키텍처로 애플리케이션을 구조화 한다.

이들의 공통점은 모델(Model) 과 뷰(View) 가 있다는 것이다.

  • Model : 데이터를 관리하는 영역
  • View : 사용자에게 보이는 부분

프로그램이 사용자에게서 어떤 작업을 받으면 (예를 들어, 버튼 클릭, 텍스트 입력) 컨트롤러(Controller)Model 데이터를 조회하거 수정하고, View 에 반영(변형, mutate)을 한다.

페이스북은 앞서 설명한 기존에 MVC 패턴에 과정처럼 어떤 데이터가 변할 때마다 어떤 변화를 줄지 고민하는 것이 아닌

그냥, 기존 뷰를 날려 버리고, 처음부터 새로 렌더링하는 방식의 아이디어를 고안해냈다.

이럴 경우

  • 애플리케이션 구조가 매우 간단해지고
  • 작성해야 할 코드 양도 많이 줄어든다.
  • 그저 뷰가 어떻게 생길지 선언하며, 데이터에 변화가 있으면 기존에 있던 것은 버리고 정해진 규칙에 따라 새로 렌더링 하면 되기 때문이다.

그런데 이게 가능한 것인가 ?

  • 웹 브라우저에서 이 방식대로라면 CPU 점유율도 크게 증가하며
  • DOM 은 느리고, 메모리도 많이 사용할 것이고
  • 사용자가 예를 들어, 인풋 박스에 텍스트를 입력할 때 마다, 기존에 렌더링된 것은 사라지고, 새로 렌더링하면 끊김 현상이 발생할 것인데 말이다.

🚀 리액트(React) ?

앞서 기술한 문제들을 고려하면서 최대한 성능을 아끼고 편안한 사용자 경험(UX)을 제공하면서 구현하고자 개발한 것이 리액트(React) 이다.

리액트는 자바스크립트 라이브러리로 사용자 인터페이스를 만드는 데 사용한다.

오직, V(View)만 신경 쓰는 라이브러리다.

  • 리액트 프로젝트는 특정 부분이 어떻게 생길지 정하는 선언체가 있고, 이를 컴포넌트(Component) 라고 한다.
  • 컴포넌트는 재사용이 가능한 API로 수많은 기능들을 내장하고 있다.
  • 컴포넌트 하나나에서 해당 컴포넌트의 생김새와 작동방식을 정의한다.

사용자 화면에 뷰(View)를 보여주는 것을 렌더링(Rendering) 이라 한다.

리액트는 이런 렌더링과정에서 초기 렌더링 과 컴포넌트의 데이터 변경으로 다시 실행되는 리렌더링 개념을 통해 데이터가 변할 때마다 새롭게 리렌더링하여도, 성능을 아끼고 최적의 사용자 경험을 제공할 수 있다.

📍 초기렌더링

  • 리액트에서는 초기 렌더링에 render 함수를 사용한다.
  • 이 함수는 HTML 형식의 문자열이 아닌, 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지낸 객체를 반환한다.
  • 컴포넌트 내부에는 다른 컴포넌트들이 들어갈 수 있다. 이 때는 그 내붕 있는 컴포넌트들도 재귀적으로 렌더링한다.
  • 최상위 컴포넌트의 렌더링 작업이 끝나면 HTML 마크업을 만들고, 이를 실제 페이지의 DOM 요소 안에 주입한다.
  • 실제 페이지에 렌더링할 때는 1. 문자열 형태의 HTML 코드를 생성, 2. 특정 DOM에 해당 내용을 주입하면 이벤트가 적용 된다.

📍 리렌더링

리액트에서의 업데이트를 어떻게 진행하는지 이다.

리액트에서 뷰(View)를 업데이트 할 때는 업데이트 과정을 거친다.라고 표현하기보단, 조화 과정을 거친다.라고 표현하는 것이 더 정확한 표현이다.

  • 데이터 변화에 따라 뷰가 변형되는 것이 아닌, 실제로는 새로운 요소로 갈아끼우기 때문이다.
  • render 함수가 데이터가 업데이트 되었을 시, 단순히 업데이트한 값을 수정하는 것이 아닌, 새로운 데이터를 가지고 render 함수를 또 다시 호출한다.
  • 이렇게, 새롭게 업데이트 된 데이터를 지닌 뷰가 재생성되는 것이다.

중요한 것은, 이 때 render 함수가 반환하는 결과를 곧바로 DOM에 반영하지 않고, 이전에 render 함수가 만들었던 컴포넌트 정보와 현재 render 함수가 만든 컴포넌트 정보를 비교 한다.

자바스크립트를 사용해서, 이전과 현재 업데이트 된 뷰를 최소한의 연산으로 비교한 후, 둘의 차이를 알아내 최소한의 연산으로 DOM 트리를 업데이트하는 것이다.

  • 방식 자체는 루트 노드부터 시작해서, 전체 컴포넌트를 처음부터 다시 렌더링 하는 것처럼 보이지만, 실제로는 최적의 자원을 사용해서 이를 수행한다.

🚀 리액트 특징

Virutal DOM , 이게 메인이다.

참고로

  • DOMDocument Object Model 이고, 이는 객체로 문서 구조를 표현하는 방법으로, XML이나 HTML로 작성한다.
  • DOM 은 트리(Tree) 형태라서, 특정 노드를 찾거나 수정하거나 제거하거나 원하는 곳에 삽입할 수 있다.
  • DOM을 통해 비로소, 객체에 자바스크립트나 CSS를 적용할 수 있는 것이다.

DOM의 치명적인 문제점은

동적 UI 에 최적화되어 있지 않다.

  • HTML은 자체적으로는 정적이고, 자바스크립트를 통해 이를 동적으로 만들 뿐이다.

이런 자바스크립트를 통한 DOM에 직접 접근하여 변화를 주는 방식에 대해, 만약 우리 애플리케이션이 대규모 데이터를 다루고 이를 표현하는 애플리케이션이라면 ?

가장 큰 이슈는 성능 이슈가 조금씩 발생하면서 결국, 느려진다 라는 말이다.

여기서 짚고 갈 것은

  • DOM 자체는 빠르다.
  • 자바스크립트 객체를 처리할 때의 성능과 비교해서 크게 다르지 않다.

느려진다 는 이유는, 브라우저 단에서 DOM에 변화가 일어나면 웹 브라우저가 CSS를 재연산 하고, 레이아웃을 재구성(Reflow)하고, 페이지를 리페인트(Repaint) 하는데, 이런 과정이 지속적으로 일어나면 느려진다는 것이다.

📍 해결책

결국, 업데이트가 잦으면 성능이 저하될 수 있다.가 문제다.

이러한 문제점을

  • DOM을 최소한으로 조작하여 작업을 처리하는 방식으로 개선한다.

React 는 Virtual DOM 방식을 사용하여, DOM 업데이트를 추상화함으로써 DOM 처리 횟수를 최소화하고 효율적으로 진행한다.

Virtural DOM

실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용한다.
마치 실제 DOM의 가벼운 사본과 비슷하다.

리액트에서 데이터가 변하여 웹 브라우저에 실제 DOM을 업데이트하는 과정은 세 가지 절차를 가진다.

  1. 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링한다.
  2. 이전 Virtural DOM에 있던 내용과 현재 내용을 비교한다.
  3. 바뀐 부분만 실제 DOM에 적용한다.

🚫 오해

리액트는 지속적으로 데이터가 변화하는 대규모 애플리케이션 구축하기`위해 만들었다.

이 말은, Virtual DOM을 사용한다고 해서 사용하지 않을 때와 비교하여 무조건 빠른 것은 아니라는 말이다.

즉, 적절한 곳에 리액트를 사용해야 진가를 발휘할 수 있다.

  • 리액트를 사용하지 않아도 코드 최적화를 하면 DOM 작업이 느려지는 문제를 개선할 수 있다.
  • 작업이 매우 간단(예: 단순 페이지 라우팅)할 경우, 오히려 리액트를 사용하지 않는 편이 더 나은 성능을 보이기도 한다.

다시 한번 강조하면

리액트Virtual DOM 이 언제나 제공할 수 있는 것은 업데이트 처리 간결성이다.

결론

적어도 이번 포스팅을 통해서 누군가

리액트는 무엇이고, 왜 사용한다고 생각하나요 ? 라는 질문을 했을 때 답할 수 있었으면 좋겠다.


참고자료

개념

  • 책 [ 리액트를 다루는 기술 ] 을 기반으로 작성했습니다.

이미지

위키백과

profile
머쓱이를 좋아합니다 😃

0개의 댓글