React Elements의 특징 및 랜더링하기

Web/React

괘창 2024. 6. 26. 11:59

- React Elements의 특징

: 불변성(immutable), 변하지 않는 성질을 의미

한 번 생성된 엘리먼트는 변하지 않는다.

# mutable은 변할 수 있는 이라는 뜻을 가지고 있으며, 여기에 부정에 의미를 가진 im을 앞에 붙이면

변경할 수없는, 불변이라는 뜻을 가진 단어가 된다.

엘리먼트는 다양한 모습으로 존재할 수 있지만 한 번 생성된 다음에는 변경이 불가능하다.

# 붕어빵이 구워져 나올 때 구어져 나온 붕어빵 속의 내용은 바꿀수 없는것 과 같은 이치

# 화면에 변경된 엘리먼트를 보여주기 위해서는 기존 엘리먼트를 변경하는 것이 아닌 새로운 엘리먼트 생성 필요!

새로운 엘리먼트를 만들어 기존 엘리먼트와 바꾸는 것!

# 화면에 새로운 내용을 보여주기 위해 Virtual DOm은 변경된 부분을 계산, 컴퓨트 딥 하고 해당 부분만 다시 랜더링

# 위 그림에서 동그란 각 원들이 엘리먼트며, 빨간색으로 표시된 원들은 변경된 엘리먼트다.

# 엘리먼트는 불변성을 갖고 있기 때문에 화면에 새로운 내용을 보여주기 위해서는

새로운 엘리먼트 생성 후 기존 엘리먼트가 연결되어 있는 부분에 바꿔서 달면 된다.

# 위 HTML 코드는 root라는 아이디를 가진 div 태그다.

# 단순한 코드지만 해당 코드는 모든 리액트 앱에 필수적으로 들어가는 아주 중요한 코드다.

# 위 div 태그 안에 실제로 리액트 엘리먼트들이 랜더링되며, 이것을 루트 돔 노드라 한다.

# 오직 리액트만으로 만들어진 모든 웹 사이트들은 단 하나의 루트 돔 노드를 가지게 된다.

※ 기존에 있던 웹 사이트에 추가적으로 리액트를 연동하게 되면 어러개의 분리된 수많은 루트 돔 노드가 생긴다.

# 최상단 동그라미가 루트 돔 노드다.

# 루트 DIV에 실제로 리액트 엘리먼트를 랜더링하기 위해서는 위 코드를 사용한다.

# 위 함수는 첫 번째 파라미터인 React 엘리먼트를 두 번째 파라미터인 HTML 엘리먼트

즉 DOM 엘리먼트에 랜더링하는 역할을 한다.

# React 엘림너트는 React Virtual DOM에 존재

# DOM 엘리먼트는 실제 브라우저의 DOM에 존재

※ React 엘리먼트가 랜더링되는 과정은 Vritual DOM에서 실제 DOM으로 이동하는 과정이다.

# 엘리먼트는 불변성으로 한 번 생성되면 바꿀 수 없기 때문에 엘리먼트를 업데이트하기 위해서는 새로 생성해야 한다.

예시)

# tick 함수는 현재 시간을 포함하고 있는 엘리먼트를 생성하여 root.div에 랜더링하는 역할을 한다.

# 자바스크립트의 setInterval 함수를 사용해서 tick 함수를 매초 1000ms마다 호출한다.

# 내부적으로는 tick 함수가 호출될 때마다 기존 엘리먼트를 변경하는 것이 아닌

새로운 엘리먼트를 생성해서 바꿔치기 하는 것이다.