[도서] 리액트를 다루는 기술 #왜 리액트인가?

 

 

리액트를 사용하면서 리액트에 대해 입으로 장점을 내뱉는 것이 어렵다는 것을 새삼 느끼니, 지식부터 잘 쌓아서 오래갈 수 있는 개발자가 되어보자는 생각이 들었다. 

멘토님의 추천과 리액트를 검색하면 가장 먼저 나오는 책이라는 점에 [리액트를 다루는 기술] 이라는 책을 구매해서 읽기 시작했고 나름 공부된 부분을 정리해보려고 한다.

리액트가 아닌 다른 프레임워크도 정보가 있으면 중간중간 함께 정리할 계획이다.

 

1.1 왜 리액트인가?

 

1️⃣ 자바스크립트 기반 프레임워크 : Backbone.js, Angular, Derby.js, Ember.js, Ext.js, Knockback.js, Sammy.js, PureMVC, Vue.js 등

 

- MVC 아키텍처 : Model-View-Controller

- MVVM 아키텍처 : Model-View-View-Model

 

 

🔷 AngularJs : MVW 아키텍처 - Model-View-Whatever

 

 

👌 공통점 : 모델 Model 과 뷰 View가 있다는 것

 

- 모델 : 데이터를 관리하는 영역

- 뷰 : 사용자에게 보이는 부분

 

업데이트하는 항목에 따라 어떤 부분을 찾아서 변경할지 규칙을 정하는 작업은 간단하지만, 애플리케이션 규모가 크면 상당히 복잡해지고 제대로 관리하지 않으면 성능도 떨어질 수 있다.

 

 

2️⃣ 리액트

 

- 페이스북 개발팀이 고안한 아이디어 : 어떤 변화를 줄지 고민하는 것이 아니라 그냥 기존 뷰를 날려 버리고 처음부터 새로 렌더링 하는 방식

=> 애플리케이션 구조가 매우 간단하고 작성해야 할 코드양도 많이 줄어든다.

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

- 앞서 설명한 방식으로 최대한 성능을 아끼고 편안한 사용자 경험을 제공하면서 구현하고자 개발한 것이 바로 리액트.

 

 

👌 리액트 이해

 

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

- 구조가 MVC, MVW 등인 프레임워크와 달리, 오직 V(View)만 신경쓰는 라이브러리

 

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

 

🔷 렌더링 : 사용자 화면에 뷰를 보여주는 것

 

 

👌 초기 렌더링

 

- 리액트의 render 함수

- 컴포넌트가 어떻게 생겼는지 정의하는 역할

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

 

 

👌 조화 과정

 

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

- 컴포넌트는 데이터를 업데이트했을 때 업데이트한 값을 수정하는 것이 아니라, 새로운 데이터를 가지고 render 함수를 또 다시 호출한다.

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

 

 

 

#출처 : 리액트를 다루는 기술(저자 : 김민준 VELOPERT)