React) 컴포넌트와 render 함수, 초기렌더링/리렌더링(조화과정) Virtual DOM

안녕하세요, 코린이의 코딩 학습기 채니 입니다.
[리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다.

 

리액트란?

- 자바스크립트 라이브러리로 사용자 인터페이스를 만드는데 사용

- 오직 V(view)만 신경 쓰는 라이브러리

 

최대한 성능을 아끼고 편안한 사용자 경험을 제공하면서 구현하는 리액트를 이해하려면 '초기 렌더링'과 '리렌더링' 개념을 이해해야 합니다.

 

먼저 컴포넌트와 render 함수에 알아보겠습니다.

---

• 컴포넌트(Component)

버튼과 텍스트 박스 등의 범용성이 높은 요소를 컴포넌트로 정의하여 UI 부품을 설계할 수 있습니다.

- 특정 부분이 어떻게 생길지 정하는 선언체

- 재사용이 가능한 API로 수많은 기능들을 내장

- 하나의 컴포넌트에서 해당 컴포넌트의 생김새와 작동 방식을 정의

 

• render 함수

UI를 사용할 때 눈에 보이는 화면을 구성해주는 랜더링이 필요하며 해당 역할을 수행합니다.

- 컴포넌트가 어떻게 생겼는지 정의하는 역할을 수행

- html 형식의 문자열을 반환하지 않고, 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체 반환

 

---

초기 렌더링

render 함수를 통해 맨 처음 어떻게 보일지를 정할 수 있습니다. 즉, 컴포넌트의 정보를 이용해 화면 랜더링을 합니다.

컴포넌트 내부에 또 다른 컴포넌트가 들어있는 경우, render 함수 실행 시 내부에 있는 컴포넌트들도 재귀적으로 랜더링 해줍니다.

그 후 최상위 컴포넌트의 랜더링 작업이 끝나면 지니고 있는 정보들을 사용하여 HTML 마크업을 생성 후 DOM 요소 안에 주입해줍니다.

 

1. 컴포넌트 정의

2. 컴포넌트의 정보를 이용해 랜더링

3. 문자열 형식 HTML 코드 반환

4. DOM 요소 주입

 

리랜더링 (조화과정)

리액트에서 뷰를 업데이트 할 때 "조화 과정을 거친다"라고 표현합니다.

그 이유는 컴포넌트에서 데이터 변화가 있을 때 변화에 따라 뷰가 변형되는 것처럼 보이지만, 실제론 새로운 요소를 갈아끼우기 때문입니다.

조화과정 또한 render 함수에 의해 작동하며, 컴포넌트는 데이터 업데이트 시 새로운 데이터를 가지고 render 함수를 또 다시 호출하게 됩니다.

그렇다면 render 함수에 의해 데이터를 지닌 뷰를 리턴할 것이고 해당 결과를 바로 DOM에 반영하지 않고 이전에 render 함수가 만들었던 컴포넌트와 현재 render 함수가 만든 컴포넌트를 비교합니다.

두 가지 뷰를 비교 후 차이를 알아내 최소한의 연산으로 DOM 트리를 업데이트 해줍니다.

 

1. 데이터의 업데이트

2. 업데이트된 데이터를 이용한 render 함수의 리랜더링

3. 이전의 컴포넌트와 리랜더링된 컴포넌트 차이 비교

4. 바뀐 요소들만 DOM에 반영

 

Virtual DOM

리액트의 주요 특징 중 하나가 Virtual *DOM을 사용하는 것!

 

* DOM

- Document Object Model의 약어

- 객체로 문서 구조를 표현하는 방법으로 XML이나 HTML로 작성

- 트리 형태이므로 특정 노드를 찾거나 수정, 제거, 원하는 곳에 삽입할 수 있음

DOM은 동적 UI에 최적화되어 있지 않아 자바스크립트를 사용하여 동적으로 만들 수 있습니다.

규모가 큰 웹 어플리케이션에서 DOM에 직접 접근하여 변화를 주면 성능 이슈가 발생하게 됩니다.

그렇다고해서 DOM를 사용하지 않을 순 없을 것입니다.

 

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

 

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

 

아래 절차를 통해 DOM을 업데이트 처리

1. 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링

2. 이전 Virtual DOM에 있던 내용과 현재 내용 비교

3. 바뀐 부분만 실제 DOM 적용

 

 

※ 아래 포스팅을 참고하였습니다.

https://brunch.co.kr/@eight-two-five/13

[React] 초기 렌더링과 리렌더링