대규모 애플리케이션 중 프론트엔드 사이드에서 돌아가는 애플리케이션 구조를 관리하려면 어떻게 해야 할까요?
이런 어플리케이션을 순수하게 자바스크립트로만 관리하는 것은 어렵다.
➡️ 프레임워크(ex. Angular, Vue.js)나 라이브러리(ex.React)같은 도구 등장
애플리케이션 구조화
모델 : 애플리케이션에서 사용하는 데이터를 관리하는 영역
뷰 : 사용자에게 보이는 부분
컨트롤러는 모델 데이터를 조회하거나 수정하고, 변경된 사항을 뷰에 반영(뷰를 변형mutate)한다.
뷰 변형은 애플리케이션 규모가 크면 상당히 복잡해지고, 제대로 관리하지 않으면 성능도 떨어질 수 있다.
페이스북 개발 팀의 해결방법
➡️ 어떤 데이터가 변할 때마다 어떤 변화를 줄지 고민하는 것이 아니라 그냥 기존 뷰를 날려 버리고 처음부터 새로 렌더링하기
이렇게 하면 애플리케이션 구조가 매우 간단해지고, 작성해야 할 코드양도 많이 줄어든다.
이것이 과연 가능할까요?
이 방식대로라면 CPU 점유율이 크게 증가한다. 메모리도 많이 사용할 것이다. 그리고 사용자의 동작이 변화를 촉발할 때마다 새로 렌더링하느라 끊김 현상이 발생할 것이다.
➡️ 이를 해결하기 위해 개발한 것이 React이다.
React
- 리액트는 자바스크립트 라이브러리이다.
- 오직 View만 신경쓴다.
- 기타 기능은 직접 구현해서 사용해야한다.
- Backbone.js, Angular.js 등의 프레임워크와 함께 사용 가능하다.
컴포넌트 : 재사용 가능한 API. 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의한다.
렌더링 : 사용자 화면에 뷰를 보여주는 것
리액트는 뷰를 어떻게 렌더링하길래 데이터가 변할 때마다 리렌더링하면서 성능을 아끼고, 최적의 사용자 경험을 제공할 수 있을까요?
DOM Documnet Object Model : 객체로 문서를 표현하는 방법
- 웹 브라우저는 DOM을 활용해서 객체에 자바스크립트와 CSS를 적용한다.
- ❗동적 UI에 최적화되어 있지 않다.
render 함수의 실행 과정
초기 렌더링 : 맨 처음에 어떻게 보일지를 결정한다. render 함수가 렌더링을 담당한다.
- render 함수는 html 형식의 문자열이 아닌 뷰의 생김새와 작동 방법에 대한 정보가 담긴 객체를 반환한다.
- render 함수 내부에 있는 컴포넌트를 재귀적으로 렌더링
- 1번 작업이 끝나면 컴포넌트 내 정보를 사용해서 HTML 마크업을 생성
- 실제 페이지의 DOM 요소 안에 주입
업데이트(= 조화 과정reconciliation)를 할 때도 render 함수를 호출한다.
- 새로운 데이터를 가지고 render함수를 또다시 호출한다.
- 해당 데이터를 지닌 뷰를 생성한다.(render 함수가 반환)
- ❗해당 뷰를 곧바로 DOM에 반영하지 않고❗ 이전에 redner 함수가 만들었던 컴포넌트 정보와 현재 redner 함수가 만든 컴포넌트 정보를 비교한다.
이때는 트리(DOM이 트리 형태이다.)를 사용해서 최소한의 연산으로 비교한다.
- 둘의 차이를 알아내 최소한의 연산으로 DOM 트리를 업데이트한다.
DOM에 변화가 일어나면 웹 브라우저가 CSS를 다시 연산하고, 레이아웃을 구성하고, 페이지를 리페인트하는 과정에서 시간이 허비된다. 이러한 방식으로 DOM을 조작할 때마다 엔진이 웹 페이지를 새로 그리기 때문에 업데이트가 너무 잦으면 성능이 저하될 수 있다.
➡️ DOM을 최소한으로 조작하여 작업하는 방식 : Virtual DOM 방식 : DOM 업데이트 추상화
- Virtual DOM을 사용하면 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용한다.
- 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링한다.
- 이전 Virtual DOM에 있던 내용과 현재 내용을 비교한다.
- 바뀐 부분만 실제 DOM에 적용한다.
*Virtual DOM을 사용한다고 해서 무조건 빠른 것은 아니다. 리액트와 Virtual DOM이 제공하는 것은 업데이트 처리 간결성이다.
작업 환경 설정
Node.js : 크롬 V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임
- 웹 브라우저 환경이 아닌 곳에서도 자바스크립트를 사용하여 연산이 가능해진다.
➡️ 자바스크립트가 웹 브라우저 영역을 넘어 웹 서버, 모바일 어플리케이션, 데스크톱 어플리케이션 영역에서도 활약 가능해짐
ECMAScript 6 : 2015년에 공식적으로 업데이트한 자바스크립트 문법
바벨 babel : ECMAScript 6를 호환시켜준다.
웹팩 webpack : 모듈화된 코드를 한 파일로 합치고(번들링) 코드를 수정할 때마다 웹 브라우저를 리로딩하는 등의 여러 기능을 지녔다.
npm : Node.js 패키지 매니저 도구. 패키지(재사용 가능한 코드)를 설치하고 설치한 패키지의 버전을 관리할 수 있게 한다.
*리액트 역시 하나의 패키지이다.
nvm : Node.js를 여러 버전으로 설치하여 관리해준다.
yarn : npm 대체품. npm보다 더 빠르고 효율적인 캐시 시스템과 기타 부가 기능을 제공한다.
ESLint : 자바스크립트 문법 및 코드 스타일을 검사해 주는 도구
