React 작동 방식 이해

Linda Hamilton원래의: 2024-09-30 20:28:29718검색

Understanding How React Works

반응이란 무엇입니까? ⚛️

React는 웹 애플리케이션을 더 빠르고 효율적으로 구축하는 데 도움이 되는 JavaScript 라이브러리입니다. 데이터를 더 잘 처리할 수 있으며 단일 페이지 애플리케이션(SPA) 모델을 사용하여 작동합니다. 이는 간결한 정의이지만 더 포괄적이라고 생각되는 또 다른 정의가 있습니다.

"React는 구성 요소와 상태를 사용하여 사용자 인터페이스(UI)를 구축하는 매우 인기 있는 JavaScript 라이브러리입니다. Facebook에서 개발했습니다."

- 요나스 슈메트만

참고: 지금부터는 여러분이 React에 어느 정도 익숙하거나 이전에 사용해본 적이 있다고 가정하겠습니다.

반응은 어떻게 작동하나요?

React는 전적으로 컴포넌트 개념을 기반으로 합니다. 구성 요소는 재사용할 수 있는 UI의 작은 부분입니다. 이제 코드가 화면에 보이는 UI로 바뀌는 과정을 살펴보겠습니다.

컴포넌트 → 컴포넌트 인스턴스 → 리액트 요소 → DOM 요소 → 화면 UI

이제 구성 요소가 무엇인지 이해했으므로 구성 요소의 실제 작동 버전인 구성 요소 인스턴스에 대해 살펴보겠습니다. 기본적으로 구성 요소는 청사진이나 템플릿과 같습니다. 구성 요소 인스턴스를 생성할 때 props를 전달하고 특정 상태를 여기에 할당합니다. 이러한 인스턴스는 React에서 작업하는 것입니다.

이 개념에 대해 더 자세히 알아보고 싶다면 Medium에서 "React Components, Instances, and Elements"를 검색해 보시기 바랍니다.

이제 목표는 다음에 일어나는 과정을 설명하는 것입니다.

리액트 요소 → DOM 요소 → 화면의 UI

이 프로세스는 4단계로 진행되며 하나씩 살펴보겠습니다.

렌더링이 실행됨
렌더링 단계
커밋 단계
브라우저 그림판

1. 렌더가 트리거됩니다.

렌더링은 두 가지 경우에 실행될 수 있습니다.

초기 렌더링: 앱이 처음으로 로드될 때 발생합니다.
상태 업데이트(재렌더링): 이는 애플리케이션에 변경이 있을 때 발생하며 일반적으로 상태가 변경될 때 발생합니다.

이 단계에서는 별다른 일이 발생하지 않으므로 다음 단계로 넘어가겠습니다.

2. 렌더링 단계

이제 '렌더링'의 의미를 다시 정의해 보겠습니다. 프런트엔드 개발자로서 우리는 UI 변경을 설명하기 위해 렌더링이라는 용어를 자주 사용합니다. 그러나 그것은 완전히 정확하지 않습니다. React에서 렌더링한다는 것은 다음 단계를 위한 UI를 준비하는 것을 의미합니다.

렌더링 단계에는 여러 단계가 포함됩니다.

1단계: 재렌더링을 트리거한 구성 요소 인스턴스

React가 컴포넌트에 변경이 발생했음을 감지하는 경우입니다.

2단계: 반응 요소

이 단계에는 프로젝트의 모든 구성 요소를 수집하고 가상 DOM 트리를 구성하는 작업이 포함됩니다. 이 트리는 각 상위 구성 요소에 하위 구성 요소가 있는 노드로 구성 요소 간의 관계를 설명합니다.

중요한 점은 상위 구성 요소가 변경되면 모든 하위 구성 요소도 다시 렌더링된다는 점입니다.

이 단계에서는 여러 가지 일이 동시에 발생합니다.

먼저 React는 가상 DOM 트리를 생성합니다.
다음으로 조정자가 개입합니다. 이는 변경된 사항을 식별하는 역할을 합니다. React에서는 조정자를 Fiber라고 합니다.

Fiber에 대해 자세히 알아보려면 다음을 확인하세요.

Medium에서 "React Fiber란 무엇이며 고성능 React 애플리케이션을 구축하는 데 어떻게 도움이 됩니까?"
Dhiwise의 "React Fiber로 고성능 애플리케이션 구축"

섬유란 무엇인가요?

Fiber는 구성 요소의 변경 사항을 조정하는 엔진입니다. 무엇이 변경되었는지, 무엇이 제거되었는지, 무엇이 추가되었는지 알려줍니다. 이는 단순화된 설명이지만 Fiber에는 몇 가지 핵심 개념이 포함됩니다.

조정: 변경 사항(추가, 업데이트 또는 제거된 DOM 요소)을 식별합니다.
비교: 현재 DOM과 가상 DOM을 비교하는 고도로 최적화된 알고리즘입니다. 이는 두 가지 규칙에 따라 작동합니다.
1. DOM 요소의 유형이 변경되는 경우.
2. 속성이나 소품이 변경되는 경우

이 알고리즘은 작업 속도를 O(n³)에서 O(n)으로 높여 앱 성능을 향상시킵니다.

Fiber Tree: 이 나무는 초기 렌더링 중에 생성됩니다. 이는 가상 DOM 트리를 미러링하지만 차이점이 있습니다. 이는 다음에 대한 통찰력을 제공합니다.
- 현황
- 소품
- 부작용
- 중고후크
- 작업 대기열

렌더링 단계는 비동기식입니다. 즉, 필요에 따라 일시 중지, 재개, 취소 또는 우선 순위를 지정할 수 있습니다. 이를 통해 React는 앱이 실행되는 동안 지속적으로 Fiber Tree를 업데이트할 수 있습니다.

이 단계의 최종 결과는 효과 목록이며, 이는 다음 단계로 전달됩니다.

3. 커밋 단계

이 단계에서 React는 렌더링 단계에서 생성된 List of Effects를 가져와 이러한 변경 사항을 DOM에 적용합니다. 이는 다른 라이브러리인 ReactDOM에서 처리합니다. ReactDOM은 확인된 React 변경 사항을 기반으로 실제 DOM을 조작하는 역할을 담당합니다.

중요: React는 UI 구조 생성을 담당하지만 ReactDOM은 브라우저별 작업을 처리합니다. 즉, 다양한 플랫폼(예: React Native)의 경우 React Native와 같은 다른 라이브러리가 UI 렌더링 방법을 관리합니다.

인터페이스를 부분적으로 렌더링할 수 없기 때문에 커밋 단계는 동기식이어야 합니다. 변경사항을 한꺼번에 적용해야 합니다.

4. 브라우저 페인트

이 마지막 단계는 React의 범위를 벗어납니다. 여기에는 브라우저의 렌더링 엔진이 화면 변경 사항을 그리는 작업이 포함됩니다. 브라우저마다 이를 다르게 처리하므로 브라우저별 렌더링 프로세스를 살펴보는 것이 좋습니다.

브라우저 작동 방식에 관심이 있다면 다음을 확인하세요.

MDN의 "페이지 채우기: 브라우저 작동 방식"
web.dev의 "렌더 트리 구성, 레이아웃 및 페인트"
Medium의 "브라우저 렌더링의 해부: 웹 페이지가 어떻게 살아 움직이는지"
Medium의 "DOM이란 무엇이며 브라우저에서 HTML 렌더링이 어떻게 발생합니까?"

추가 자료:

더 자세히 알아보고 싶다면 다음 유용한 리소스를 참조하세요.

GitHub의 "react-fibre-architecture(acdlite)"
React.dev의 "렌더링 및 커밋"
2024년 최고의 React 과정: React, Next.js, Redux 등 작성자: Jonas Schmedtmann.

위 내용은 React 작동 방식 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript html if for while using Interface JS dom this github react native ui

성명：

이전 기사：DOM 이벤트 이해다음 기사：DOM 이벤트 이해