2024-05-30 리액트의 핵심, Virtual DOM이란?

리액트 공부를 시작하면서 빨리 코드를 작성할 생각만 했지 정작 리액트가 무엇인지 설명을 못하고, virtual DOM에 대해 묻는 과제의 질문에 답하지 못했다.

오늘 숙련 과제 제출이 끝났으므로, 기본을 먼저 다지고 가려고 한다.

리액트의 특징

Virtual DOM

리액트는 Virtual DOM을 사용한다.

DOM은 Document Object Model의 약자로, 객체를 통해 문서 구조를 표현하는 방법이고, XML, HTML로 작성한다.

DOM의 치명적인 단점 : 정적이다. 동적 UI에 최적화 되어 있지 않다. HTML 자체는 정적인 정보만 렌더링 해준다. 자바스크립트를 통해 동적으로 만들 수 있다.

그런데 소셜미디어나 대규모 포털사이트와 같은 사이트에서의 DOM은 수 백, 수 천 개에 달한다. 사용자가 DOM을 조작하여 페이지가 리페인트 될 때마다 CSS와 HTML을 매번 불러 읽어들여야 하기 때문에 성능이 저하될 수 있다.

리액트는 Virtual DOM 방식을 사용하여 DOM 업데이트를 추상화함으로써 DOM 처리 횟수를 최소화 하고 효율적으로 진행한다.

Virtual DOM을 사용하면 실제 DOM에 접근하여 조작하는 대신 이를 추상화한 자바스크립트 객체를 구성하여 사용한다.

방식은 아래와 같다.

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

조금 더 자세히 설명하자면 아래와 같다.

1. 데이터 업데이트 : 사용자가 버튼을 클릭하거나 입력 필드에 텍스트를 입력하는 등 데이터가 변경될 때 리액트는 새로운 Virtual DOM을 생성함.
2. Virtual DOM : 새로운 Virtual DOM과 이전 Virtual DOM을 비교함. 이것을 diffing이라고 함. 이 과정을 통해 리액트는 두 가상DOM 사이에서 변경된 부분만 찾아냄.
3. 변경사항 적용 : 변경된 부분만 실제 DOM에 적용함. 전체 페이지를 그리지 않고 변경된 부분만 리렌더링 하므로 매끄러운 사용성을 보여줌.

리액트 개발진들이 밝힌 리액트 개발의 목적은 지속적으로 데이터가 변화하는 대규모 애플리케이션 구축이다.

이런 프로젝트가 아니라면 굳이 리액트로 개발할 필요가 없을 수도 있다.

프레임워크? 라이브러리?

리액트는 라이브러리이다. 오직 view만 담당한다. 라우팅이나 데이터 모델링 등은 기타 라이브러리 패키지를 사용해야 한다.

예를 들어 Redux, React-router-dom 등이 많이 사용되는 라이브러리이다.

리액트의 주요 개념

1. 컴포넌트(Component) : 리액트 애플리케이션은 여러 개의 작은 컴포넌트로 나뉨. 컴포넌트는 독립적이고 재사용 가능한 UI 조각을 말함. 예를 들어, 버튼, 입력 필드, 내비게이션 바 등이 모두 컴포넌트가 될 수 있음.

2. 상태(State) : 컴포넌트는 상태를 가질 수 있음. 상태는 컴포넌트의 데이터. 사용자가 입력한 내용이나 버튼 클릭 여부 등을 상태로 관리할 수 있음.

3. 프롭스(Props) : 프롭스는 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 때 사용됨. 프롭스는 읽기 전용이므로 자식 컴포넌트에서는 수정할 수 없음. 즉 단방향 데이터 흐름임.

4. JSX : JSX는 자바스크립트 확장 문법으로, HTML과 비슷하게 생겼지만 자바스크립트 코드 안에서 사용됨. JSX를 사용하면 UI를 정의하는 코드가 더 직관적이고 읽기 쉽게 작성된다는 장점이 있음.