리액트 1. 리액트 이해, 초기렌더링, render함수 ,DOM,리렌더링, Virtual DOM 뭔지 용어 (반복학습)

자바스크립트는 현재 웹 어플리케이션에서 가장 혁신적인 역할을 하고 있다 . 영역을 확장하여 서버 사이드는 물론 모바일 , 데스크톱 어플리케이션에도 적용이 가능하다.

이렇게 자바스크립트만으로 규모가 큰 애플리케이션을 만들기위해 여러 프레임워크 들이 등장하게 되웠다.

주로 MVC, MVVM 아키텍처를 사용한다.

페이스북 개발 팀은 이를 해결하기 위해 어떤 데이터가 변화 할 때마다 어떤 변화를 줄지 고민하는것이 아니라

기본 뷰를 버리고 처음부터 새로 렌더링하고자 하였다

그런데 변화에 따라 렌더링을 계속하면 cpu 점유율도 크게 증가하고 메모리도 많이 사용하게 된다. 그래서

성능을 최대한 아끼면서 사용할 수 있도록 개발한 것이 리액트 이다.

리액트 이해

• 리액트는 MVC MVW 등인 프레임워크와 달리 오직 View 만 신경 쓰는 라이브러리 입니다.
• 리액트 컴포넌트가 최초로 실행하는 초기 렌더링 과 컴포넌트의 데이터 변경으로 다시 실행되는 리렌더링 과정을 통해 변화 할 때마다 새롭게 리렌더링하면서 성능을 아끼고, 최적의 사용자 경험을 제공할 수 있다.

초기 렌더링

어떠한 ui 관련한 프레임워크 , 라이브러리를 사용하든지 간에 맨! 처음 사용자가 화면에 뷰를 보여주는 것을 초기 렌더링이라고 합니다.

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

• 맨 처음에 어떻게 보일지를 정하는 초기 렌더링이 필요하다.

 

 

Render 함수

render(){…}

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

 

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

☑️  좀더 짧게 정리 하면 

1. 컴포넌트를 정의 한다.
2. 뷰의 모양새와 작동 방식에 대한 정보를 지닌 객체 반환
3. 내부 컴포넌트 재귀적 렌더링 ( 컴포넌트 내부엔 컴포넌트가 들어갈 수 있다.)

그렇다면 최상위 컴포넌트의 렌더링 작업이 끝나면~?

1. html 마크업을 만든다.
2. 실제 페이지의 DOM 요소 안에 주입한다

조회 과정 (리렌더링)

데이터를 업데이트 했을 때 업데이트한 값을 수정하는 게 아니라 새로운 데이터를 가지고 render함수를 다시 호출합니다.

render 함수가 변환 하는 결과로 곧 바로 DOM에 반영하지 않고 이전에 render 함수가 만들었던 컴포넌트정보와 비교하여 둘의 차이를 알아내 바뀐 부분만 최소한의 연산으로 DOM트리를 업데이트 한다.

결국 방식 자체는 전체 컴포넌트를 처음부터 다시 렌더링 하는 것처럼 보이지만 최적의 자원을 사용하여 이를 작업 수행 하는 것이다.

 

리액트 의 특징

리액트는 프레임워크가 아니라 라이브러리이다.

다른 웹 프레임워크 가 Ajax 데이터 모델링 , 라우팅 등 과 같은 기능을 내장하고 있지만 리액트는 뷰만 신경쓰는 라이브러리 이기 때문에 기타 기능은 직접 구현 해야 한다.!

(다른 개발자들이 만든 라이브러리 사용하면 해결가능하다) → 라우팅-리액트라우터, 상태관리 리덕스, Mobx , ajax- axios , fetch 이렇게

장점: 자신의 취향대로 스택을 설정 가능

단점: 여러 라이브러리를 접해야한다.

 

 

DOM (Document Object Model) 돔 이라 불리우는 이 것은 → 객체 문서 모델

객체로 문서 구조를 표현하는 방법이다. 트리 형태이며 XML, HTML 로 작성한다.

이건 자바스크립트 에서 다시 해볼게용

• 웹 브라우저는 돔을 활용하거나 객체에 자바스크립트와 css를 연결한다.
• 돔 은 트리 형태이기 때문에 특정 노트를 조회, 수정, 삭제 , 원하는 곳에 삽입할수 있디ㅏ.
• 돔의 단점은?

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

→ 돔 자체는 빠르지만 돔에 변화가 일어나면 웹 브라우저가 css를 다시 연산하고 레이아웃을 구성하고 페이지를 리 페인트 하는데 시간이 허비되는 것 이다.

• 해결 방법은? 돔을 최소한 조작하여 작업을 처리하는 방식으로 개선 가능

리액트는 Virtual DOM 방식으로 DOM 업데이트를 추상화 함으로써

, DOM 처리 횟수를 최소화 하고 효율적으로 진행 할 수 있다.

여기서 Virtual DOM 뭔데?

실제 돔에 접근하여 조작하는 대신!! 추상화한 자바스크립트 객체를 구성해서 사용해!

리액트에서 돔을 업데이트 하는 절차 순서

1. 데이터를 업데이트 하면 전체 UI를 Virtual DOM 에 리렌더링
2. 이전의 Virtual DOM 에 있던 내용과 현재 내용을 비교
3. 바뀐 부분만 실제 DOM 에 적용

Virtual DOM 의 장점은 뭔데?

지속적으로 데이터가 변화하는 대규모 어플리케이션 구축에 사용한다!!