리액트

자바스크립트 기반의 프레임워크에는 Vue, Angular, Backbon.js 등이 있다.

프레임워크들은 주로 MVC 아키텍처, MVVM 아키텍처를 사용하고 Angular는 MVW(Model View Whatever)로 애플리케이션을 구조화한다.

위 아키텍처의 공통점은 모델(Model)과 뷰(View)가 있다는 것

모델(Model)은 애플리케이션에서 사용하는 데이터를 관리하는 영역

뷰(View)는 사용자에게 보이는 부분이다.

사용자가 프로그램으로 어떤 작업을 하면 컨트롤러(Controller)가 모델 데이터(Model)를 조회하거나 수정하고 변경된 사항을 뷰(View)에 반영한다

 

페이스북에서 데이터가 변할 때마다 어떻게 변화할지 고민하는 것이 아니라 기존 뷰를 날리고 처음부터 새로 렌더링 하는 방식으로 개발한 것이 리액트이다.

리액트는 자바스크립트 라이브러리이다.

리액트는 구조가 MVC, MVW등의 프레임워크와는 달리 오직 View만 신경쓰는 라이브러리다.

리액트에서 특정 부분이 어떻게 생길지 정하는 선언체를 컴포넌트(component)라고 한다.

컴포넌트는 재사용이 가능한 API로 수많은 기능들을 내장, 하나의 컴포넌트에서 해당 컴포넌트의 생김새와 작동방식을 정의한다.

ps. 템플릿은 HTML 태그 형식을 문자열로 반환하는 것이다.

 

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

리액트는 컴포넌트가 최초로 실행한 초기 렌더링과 컴포넌트의 데이터 변경으로 다시 실행되는 리렌더링으로 뷰를 렌더링 한다.

 

초기 렌더링

리액트에는 렌더링을 다루는 render 함수가 있다.

render() { .... } 

render 함수는 컴포넌트가 어떻게 생겼는지 정의하는 역할을 한다.

html 형식의 문자열을 반환하지 않고, view가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환한다.

컴포넌트 내부에는 다른 컴포넌트들이 들어갈 수 있다.

render 함수를 실행하면 그 내부에 있는 컴포넌트들도 재귀적으로 렌더링 한다.

최상위 컴포넌트의 렌더링 작업이 끝나면 지니고 있는 정보들을 사용하여 HTML 마크업을 만들고, 이를 우리가 정하는 실제 페이지의 DOM 요소 안에 주입한다.

컴포넌트를 실제 페이지에 렌더링 할 때 분리된 두 가지 절차를 따르는데, 먼저 문자열 형태의 HTML 코드를 생성한 후 특정 DOM에 해당 내용을 주입하면 이벤트가 적용된다.

 

리액트에서는 뷰를 업데이이트할때 '조화 과정을 거친다'라고 한다.('업데이트 한다'보다는 '조화 과정을 거친다'라는 말이 옳다고 한다.)

컴포넌트 데이터에 변화가 있을 때 새로운 데이터를 가지고 render 함수를 다시 호출한다.

그러면 그 데이터를 가진 DOM(새로운 DOM)과 이전에 생성했던 DOM(이전 DOM)을 최소한의 연산으로 비교한 후, 둘의 차이를 알아내 최소한의 연산으로 DOM 트리를 업데이트한다.

 

리액트의 주유 특징 중 하나는 Virtual DOM을 사용하는 것이다.

DOM은 Document Object Model의 약자로 객체로 문서 구조를 표현하는 방법으로, HTML이나 XML로 작성한다.

DOM은 동적 UI에 최적화되어 있지 않아서 규모가 큰 웹 애플리케이션에서 직접 접근하여 변화를 주다 보면 성능 이슈가 조금씩 발생한다.

DOM 자체는 빠르지만 DOM에 변화가 일어나면 웹브라우저가 CSS를 다시 연산하고, 레이아웃을 구성하고, 페이지를 리페인트하는 과정에서 시간이 많이 허비되어 느린 느낌을 주는 것이다.

리액트의 Virtual DOM은 DOM 업데이트를 추상화함으로써 DOM 처리 횟수를 최소화하고 효율적으로 진행한다.

 

Virtual DOM을 사용하면 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용한다.

웹 브라우저에서 실제 DOM을 업데이트할 때는 다음 세 가지 절차를 밟는다.

1. 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링한다.

2. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교한다.

3. 바꾸니 부분만 실제 DOM에 적용한다.

 

리액트를 사용한다고 무조건 빠른 것은 아니다.

코드 최적화를 열심히 하거나 작업이 매우 간단한 경우( ex) 정적 페이지)에는 오히려 리액트를 사용하지 않는 것이 더 나을 수 있다.

 

리액트는 오직 뷰만 담당하기 때문에 라우팅에는 리액트 라우터, Ajax 처리는 axios나 fetch, 상태 관리는 redux나 MobX를 사용하여 빈자리를 채워줘야 한다.

자신의 취양대로 스택을 설정할 수 있는 장점이 있지만 여러 라이브러리를 접해야 한다는 단점도 있다.

 

 

 

 

출처: 리액트를 다루는 기술