[React] 왜 리액트여야 하는가

React - 1

[본 글은 '리액트를 다루는 기술' 의 책을 참고로 정리한 공부 내용입니다.]

왜 리액트여야만 하는가?

이제는 자바스크립트만으로 대규모 애플리케이션을 개발할 수 있는 시대가 왔다.

프론트엔드 사이드에서 돌아가는 애플리케이션 구조를 관리하려면 순수 자바스크립트 만으로는 부담이 존재한다.

어째서?

규모가 클수록 코드가 복잡해진다.

코드가 복잡해 지는 만큼 관리의 어려움이 증가해 성능이 떨어진다.

이런 문제점이 존재함으로 지금껏 수많은 

MVC(Model-View-Controller)

MVVM(Model-View-View Model)

MVW(Model-View-Whatever)

아키텍쳐 기반으로 프레임워크들이 개발되었다.

이런 각종 프레임워크들의 공통점은?

Model-View

Model : 애플리케이션에서 사용하는 데이터를 관리하는 영역

View :  사용자에게 보이는 부분

사용자가 이벤트를 발생시키면 컨트롤러에서 모델 데이터를 조회/수정

그렇게 변경된 사항을 뷰에 반영을 한다. (이 때 뷰를 변형하는 방식으로 변경된 사항을 반영한다.)

그럼 조금 더 간편한 방법은 없을까요?

페이스북 개발 팀이 고안해 낸 방법은 바로 데이터가 변경될 때마다

뷰의 변형이 아닌 기존 뷰를 날리고 새로 랜더링하는 방법이다.

이런 식으로 구현할 경우의 장점이 존재한다.

간단하다

코드의 양이 줄어든다

이런 식의 구현이 가능한가요?

현실적으로 웹 브라우저에서 이런 식으로 개발을 할 경우 간과할 수 없는 몇 가지 문제점들이 존재한다.

CPU 점유율 증가

메모리 사용량 증가

렌더링의 반복으로 페이지의 끊김 현상 발생

이런 단점을 고려하며 페이스북 개발 팀이 최대한 성능을 아끼고, 편안한 사용자 경험을 제공해 줄 수 있도록 개발한 프레임워크가 바로 리액트이다.

이런 문제점을 어떻게 극복해내느냐를 이해하기 위해서는

초기 렌더링과 리렌더링, Virtual DOM에 대한 이해가 필요한데,

이것에 대해서는 천천히 알아보도록 하겠다.