REACT A to Z - 1

아기코딩단2·2022년 7월 1일
0

React

목록 보기
1/11

-- 참고금지 이론 설명만함 --

리액트의 등장과정

자바스크립트 프레임워크들은 MVC, MVVM 아키텍쳐를 사용함
앵귤러같은 경우는 MVM 아키텍쳐로 구조화 되어있음
이들의 공통점은 view가 있다는 거임 프로그램이 사용자에게서 어떤작업(예 : 버튼 클릭, 텍스트 입력 등)을 받으면 컨트롤러는 모델 테이터를 조회 or 수정, 변경된 사항을 뷰에 반영, 이는 애플리케이션 규모가 크면 상당히 복잡해지고 제대로 관리하지 않으면 성능저하 문제 발생
페이스북 개발팀의 해결책? 기존뷰를 날려버리고 처음부터 새로 렌더링 하는 방식 고안 그러나 DOM은 느리고 CPU점유율도 올라감

이에 대한 해결책에 이해하기 위해서는
1. 초기 렌더링에 대한 이해
2. 리렌더링에 대한 이해

1-1 초기렌더링 react에는 render 함수 존재
이 함수의 역할? 컴포넌트가 어떻게 생겼는지 정의하는 역할을 함 반환값? html형식의 문자열을 반환하지 않음. 컴포넌트 내부에 또 다른 컴포넌트가 들어갈 수 있음. 이때 render함수를 실행하면 그 내부에 있는 컴포넌트 들도 재귀적으로 렌더링 함
렌더링 작업이 끝나게 되면 가지고 있는 정보들을 사용하여 HTML 마크업을 만들고 이를 우리가 정하는 실제 페이지의 DOM요소 안에 주입함

1-2 조화과정은 컴포넌트에서 데이트에 변화가 있을 때 뷰가 변형되는 것이 아니고 새로운 요소로 갈아끼우는 것임 이 역할 또한 render함수가 함 그러나 바로 갈아끼우지 않고 이전 render함수가 만든 컴포넌트 정보를 비교해서 최소한의 연산으로 DOM트리를 업데이트 함

Virtual DOM

DOM은 동적 UI에 최적화 되어있지 않아서 느리다.
현재의 인스타그램, 트위터 등은 스크롤바를 내릴수록 수많은 데이터가 로딩됨. DOM자체는 느리지 않지만 DOM에 변화가 일어나면 웹브라우저가 CSS를 다시 연산하고, 레이아웃을 구성하고, 페이지를 리페인트함 => 이 과정에서 시간이 허비된다.
리액트에서 이를 해결하는 방법?
=> DOM을 최소한으로 조작한다. 즉 Virtual DOM을 사용함 => DOM 처리 횟수를 최소화하고 효율적으로 진행함.
다른 라이브러리와 달리 오직 view만 담당함

***Virtual DOM이 제공하는 것은 업데이트 간결성임

profile
레거시 학살자

0개의 댓글