React, Virtual DOM

WONNY_LOG·2023년 4월 27일

리액트는 라이브러리인가요 프레임워크 인가요?🔥

➡️ UI를 만드는데 도움을 주는 도구이기 때문이다.

프레임워크

사용자가 작업을 하기 위한 전체적을 tool제공 (뼈대, 기반구조 제공)
tool 안에서 그 방식에 맞춰 작업을 한다
angular , vue, express

라이브러리

전체적인 tool X, 부분적으로 쓰이는 기능만 도구처럼 제공함 (기능함수 모음집)
공통으로 사용하는 기능들을 모듈화한 것
react

공통

복잡한 개발 로직들을 미리 구현하여 제공함
다양한 형태의 기능을 제공함 > 개발자 개발 편의성 ⬆️

차이

제어흐름의 권한을 누가 가지고 있는가? 제어의 역흐름 (IoC : Inversion of Control)
프레임워크 : 정해진 틀에 맞게 사용자가 필요한 기능을 입력함 (제어의 역전 적용)
라이브러리 : 사용자가 필요한 기능을 상황에 따라 호출함

➡️ 리액트는 프로그램의 흐름을 사용자가 제어할 수 있음 (다양한 hooks를 통해서도 가능)

리액트를 사용하는 이유🔥🔥

다른 라이브러리, 프레임 워크에 비해 대중화되어가고있는 리액트

장점으로는

빠른 화면 출력 속도
-> virtual DOM기술로 렌더링 속도를 높힘(이미 그려진 화면에 변경되는 값만 인지하여 바꿔주는 원리)
효율적인 화면 구성 (component 재사용성)
-> component단위를 조합하여 화면을 그려줌.
-> component를 사용하여 코드의 복잡성을 줄임
-> component로 나눠져있기 때문에 코드의 재사용성이 높아 짐 (개발 시간 단축, 유지보수 용이)
단방향 데이터 바인딩으로 안정성보장
리액트는 자바스크립트 기반의 문법이기 때문에, 자바스크립트에 익숙한 웹프론트 개발자들이 쉽게 접근/사용 가능하다.
리액트를 만든 메타(페이스북)의 지속적인 유지보수 덕분에 생태계가 활성화 되어있다.
-> 문제 해결방법이 다양하고, 넓게 공유되어있음
선언형이다.
-> 필요한 부분에 메서드(이미 개발된 코드)를 선언하여 개발 속도가 빠르고 편리함
React Native를 활용한 모바일 앱 구축가능 (유연성 보유)
-> 안드로이드 같은 경우는 코틀린을 IOS는 스위프트로 개발을 해야하는데 진입장벽이 높다
js기반은 React Native는 AOS와 IOS 동기 개발 가능
다른 framework나 라이브러리와 병행해서 사용가능하다

단점으로는

view이외의 기능들은 직접구현 혹은 라이브러리를 이용해야하기 때문에 JS에 대한 지식필요
Vue에 비해 virtual DOM 구현 속도가 느리다
IE8 이하 지원하지 않는다
SPA 단점으로 서비스의 규모가 커지면 느려진다

마치 프레임워크 처럼 느껴지긴하지만, react는 UI만 컨트롤하는 도구이기 때문에 `라이브러리` 이다.

virtual DOM에 대해서 아나요?🔥🔥

브라우저에 화면을 그리기 위해서 DOM이라는 개념을 사용한다.
DOM은 HTML파일 내용을 바탕으로 만들어지고, 그 위로 JS와 같은 스크립팅 언어로 수정할 수 있도록 만들어진 웹페이지의 객체 지향 표현이다.
DOM은 브라우저가 화면을 그리기 위해서 필요한 정보들이 트리형태로 저장된 데이터이다.

React에서는 이러한 DOM을 바탕으로 가상 DOM을 만드는데 이것이 바로 Virtual DOM이다.

가상돔이 필요한 이유?

실제 DOM은 화면을 그리기 위해 필요한 데이터들이 다 들어있어 이를 조작하는 작업이 굉장히 무겁다.

즉 화면이 업데이트(새로고침)된다는 말은 DOM이 수정된다는 말인데,
기존의 방식은 DOM을 직접 수정하는 거라서 수정할 데이터를 DOM에서 모두 찾아야하기 때문에 이는 곧
성능과 비용적인 측면에서 많이 드는 작업이다.

그래서 react에서는 실제 DOM을 직접 수정하는 것이 아니라, 변경사항을 빠르게 파악하고 변경하기 위해 Virtual DOM을 만들어 업데이트 해야할 최소한의 부분만 찾아서 변경한다.
(실제 DOM이 아닌 메모리 상에서 동작함. 그리고 Virtual DOM tree는 실제 렌더링이 되지 않기 때문에 연산비용이 적음)

사실 Virtual DOM이 하는 것은 DOM fragment에 변화를 묶어서 적용시킨 다음에 기존 DOM에 던져 주는 과정이다. Virtual DOM은 이 과정을 자동화, 추상화해놓은 것에 불과하다.

브라우저(웹페이지)와 실제 DOM 사이에서 중간 매개체의 역할을 한다고 할 수 있다.

이해가 잘 되는 포스팅그림이 있길래 가져와봄

작동원리 ?

특정 컴퍼넌트의 상태가 변하면 해당 컴퍼넌트의 shouldComponentUpdate함수 실행
> 함수의 리턴 값(boolean)에 따라 해당 컴퍼넌트 리렌더 결정
> 컴퍼넌트의 렌더를 통해 얻은 새로운 Virtual DOM이 실제 DOM과 동기되어있는 기존 Virtual DOM과 비교하여 변경 사항 파악 (검색 (Compute Diff))
> 변경된 부분이 있다면 DOM API를 호출하여 검색한 부분(변경된부분)만을 업데이트하고 렌더링 함