2022.07.10

p1~50

대규모 애플리케이션 -> 자바스크립트 + 여러 프레임워크들(Anugluar, vue.. ) 이 프레임워크들은 주로 MVD 아키텍처, MVVM 아키텍처를 사용함. Angular js 의 경우 MVW 아키텍처로 애플리케이션 구조화. 이와 같은 구조의 공통점: 모델과 뷰가 있다는 것. 

모델 = 애플리케이션에서 사용하는 데이터를 관리

뷰 = 사용자에게 보이는 부분 

프로그램이 사용자에게서 어떤 작업을 받으면 컨트롤러는 모델 데이터를 조회하거나 수정하고 변경된 사항을 뷰에 반영

 

리액트는 오직 뷰만 신경 쓰는 라이브러리임. 컴포넌트는 재사용이 가능한 api 로 수많은 기능들을 내장하고 있음 

 

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

 

리액트 컴포넌트가 최초로 실행한 초기 렌더링과 컴포넌트의 데이터 변경으로 다시 실행되는 리렌더링 개념 이해해야 데이터가 변할 때마다 새롭게 리렌더링하면서 성능을 아끼고 최적의 사용자 경험을 제공하는 방법을 알 수 잇음. 

 

초기 렌더링 -> render 함수는 컴포넌트가 어떻게 생겼는지 정의하는 역할. 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환. render 함수 실행 시 내부에 있는 컴포넌트들도 재귀적으로 렌더링함.  최상위 컴포넌트의 렌더링이 끝나면 지니고 있는 정보를 이용, html 을 만들고, 페이지의 dom 요소 안에 주입시킴. html 코드 생성 후 특정 dom 에 해당 내용 주입 시 이벤트 적용됨 

 

리액트에서 뷰 업데이트 시에는 조화 과정을 거친다는 게 맞는 표현. 사실은 컴포넌트에서 데이터에 변화가 있을 때 새로운 요소로 갈아끼우는 것이기 때문. 컴포넌트는 데이트 업데이트 시 새로운 데이터를 가지고 render 함수를 또 다시 호출. but 이때 render 함수가 반환하는 결과를 곧바로 Dom 에 반영하는 것이 아니라 이전에 render 가 만들었던 컴포넌트와 최소한의 연산으로 비교한 뒤 둘의 차이를 알아내 최소한의 연산으로 dom 트리를 업데이트함. 

 

Dom 은 document object model 의 약어임. 즉 객체로 문서 구조를 표현하는 방법으로 xml 이나 html 로 작성. 웹 브라우저는 dom 을 활용하여 객체에 js 와 css 를 적용함. dom 은 트리 형태이기 때문에 특정 노드를 찾거나 수정하거나 제거하거나 원하는 곳에 삽입 가능. 

 

dom 의 문제점 = 동적 ui 에 최적화되어 있지 않다는 점. dom 자체는 빠르지만 웹브라우저 단에서 dom 에 변화가 생기면 웹 브라우저가 css 를 다시 연산하고 레이아웃을 구성하고 페이지를 리페인트. 이 과정에서 시간 허비 

-> 해결법: dom 을 최소한으로 조작하기. virtual dom 방식을 사용해 dom 업데이트를 추상화함으로써 dom 처리 횟수를 최소화하고 효율적으로 진행함. 

 

virtual dom 사용 시 실제 dom 에 접근하지 않고 이를 추상화한 자바스크립트 객체를 구성하여 사용함. 리액트에서 데이터가 변하여 웹 브라우저에 실제 dom 을 업데이트할 때는 다음 세 가지 절차를 밟음. 1. 데이터를 업데이트하면 전체 ui 를 virtual dom 에 리렌더링 2. 이전 virtual dom 에 있던 내용과 현재 내용 비교 3. 바뀐 부분만 실제 dom 에 적용. 단 virtual dom 을 사용한다고 해서 무조건 빠른 것은 아님. 리액트와 virtual dom 이 제공하는 것은 업데이트 처리 간결성 뿐! 

 

리액트는 프레임워크가 아니라 라이브러리이다. 따라서 ajax, 데이터 모델링, 라우팅 등 다른 기능은 직접 구현해야 함. 라우팅에는 리액트 라우터, ajax 처리에는 axios 나 fetch 상태 관리에는 redux 나 mobx 를 사용.