React) 1장 리액트 시작

리액트의 주요 특징 중 하나는 Virtual DOM을 사용하는 것이다.

 

먼저 DOM에 대해 알아보자

DOM(Document Object Model) : 객체로 문서 구조를 표현하는 방법이며 XML이나 HTML로 작성된다.

트리형태로 구성되며 특정 노드를 찾거나 수정, 제거가 가능하고 원하는 곳에 추가 가능하다.

웹브라우저는 DOM을 활용하여 객체에 JavaScript와 CSS를 적용한다.

 

💢규모가 큰 웹 어플리케이션에서 DOM이 느린이유

- DOM 자체는 JavaScript와 비교했을 때 느리지 않다.

  하지만 웹브라우저 단에서 DOM에 변화를 감지하여 브라우저가 CSS를 재연산, 레이아웃 재구성, 페이지 리페인팅

  하는 과정으로 느려지는 것이다.

 

🔰해결법🔰

- DOM조작시 웹을 업데이트하면 성능저하가 발생하고, DOM조작은 필수이기에 Virutal DOM을 이용해 DOM

  업데이트를 추상화 함으로써 DOM 처리 횟수를 최소화 하고 효율적으로 진행한다.

 

 

⭕Virtual DOM⭕

Virtual DOM을 사용하면 실제 DOM을 추상화한 JavaScript 객체를 구성해 사용(실제 DOM의 가벼운 사본과 비슷하다)

 

React에서 웹에서의 DOM업데이트의 3가지 과정

1️⃣데이터 업데이트와 동시에 전체 UI를 Virtual DOM에 렌더링

2️⃣이전 Virtual DOM에 있던 내용과 현재 내용을 비교

3️⃣비뀐 부분만 실제 DOM에 적용

 

💢주의점💢

Virtual DOM을 사용한다고 무조건 빨라지는 것은 아니다.

리액트 사용은 지속적으로 데이터가 변화하는 대규모 어플리케이션 구축을 할 때 최고의 성능을 발휘한다.

리액트 없이도 코드 최적화를 통해 문제를 개선할 수 있고, 단순 라우팅이나 정적 페이지는 리액트 사용을 하지 않는 것이 좋다.

 

리액트와 Virtual DOM이 제공하는 것은 업데이트 처리 간결성이다.

 - UI 업데이트 과정에서 생기는 복잡성 해소, 쉽게 업데이트에 접근한다.

 

 

기타 특징

- 리액트는 뷰(view)만 담당하기에 기타 기능은 직접 구현해야 한다. 리액트는 라이브러리이기 때문이다

- 라이팅은 라우터, Ajax 처리는 axios나 fetch, 상태관리에 리덕스나 Mobx를 사용해 빈자리를 채움

- 위에서 기타 기능은 직접 구현해야 해서 자신의 취향에 맞게 라이브러리를 사용해 스택을 설정

- 다른 웹 프래임워크와 라이브러리 혼용 가능

 

 

🗯추가 정보

init npm : 프로젝트 생성

CRA(create-react-app) : 리액트 프로잭트 생성