React 및 Virtual DOM 작동 방법을 배우는 빠른 안내서

Unsplash에서 @simonmigaj의 그림
이 기사는 핵심 기능과 따라야 할 모범 사례 인 React를 소개하는“초보자를위한 React”시리즈의 일부입니다. 더 많은 기사가오고 있습니다!
다음 기사>

문서를 크롤링하지 않고 React를 배우고 싶습니까? 올바른 기사를 클릭했습니다.

단일 HTML 파일로 React를 실행하고 첫 번째 코드 조각에 노출하는 방법을 배웁니다.

결국 소품, 기능적 구성 요소, JSX 및 가상 DOM과 같은 개념을 설명 할 수 있습니다.

목표는 시간과 분을 표시하는 시계를 만드는 것입니다. React는 컴포넌트로 코드를 설계 할 것을 제안합니다. 시계 구성 요소를 만들어 보겠습니다.

종속성에 대한 HTML 상용구 및 스크립트 가져 오기를 무시하십시오 (unpkg를 사용하는 경우에는 반응 예제 참조). 나머지 몇 줄은 실제로 React 코드입니다.

먼저 Watch 구성 요소와 해당 템플릿을 정의하십시오. 그런 다음 React를 DOM에 마운트하고 시계를 렌더링하도록 요청하십시오.

구성 요소에 데이터 주입

우리 시계는 아주 어리 석습니다. 우리가 제공 한 시간과 분을 표시합니다.

당신은 그 속성 (React에서 props라고 불림)의 값을 변경하고 변경할 수 있습니다. 숫자가 아니더라도 요청한 내용이 항상 표시됩니다.

렌더링 기능 만있는 이러한 종류의 React 구성 요소는 기능적 구성 요소입니다. 클래스에 비해 더 간결한 구문이 있습니다.

소품은 일반적으로 주변 구성 요소에 의해 구성 요소로 전달되는 데이터입니다. 컴포넌트는 비즈니스 로직 및 렌더링에 소품을 사용합니다.

그러나 소품이 구성 요소에 속하지 않으면 불변입니다. 따라서 props를 제공 한 컴포넌트는 props 값을 업데이트 할 수있는 유일한 코드입니다.

소품을 사용하는 것은 매우 간단합니다. 컴포넌트 이름을 태그 이름으로 사용하여 DOM 노드를 작성하십시오. 그런 다음 props라는 이름의 속성을 지정하십시오. 그런 다음 구성 요소의 this.props를 통해 소품을 사용할 수 있습니다.

따옴표없는 HTML은 어떻습니까?

렌더 함수에 의해 인용되지 않은 HTML이 반환되는 것을 알 수 있습니다. 이 코드는 JSX 언어를 사용하며 React 컴포넌트에서 HTML 템플리트를 정의하는 간단한 구문입니다.

이제 컴포넌트의 템플릿을 정의하기 위해 JSX를 피할 수 있습니다. 실제로 JSX는 구문 설탕처럼 보입니다.

JSX와 React 구문을 보여주는 다음 스 니펫을 살펴보고 의견을 작성하십시오.

가상 DOM으로 더 나아 가기

이 마지막 부분은 더 복잡하지만 매우 흥미 롭습니다. React가 어떻게 작동하는지 이해하는 데 도움이됩니다.

웹 페이지 (DOM 트리의 노드)에서 요소를 업데이트하려면 DOM API를 사용해야합니다. 페이지를 다시 페인트하지만 속도가 느릴 수 있습니다 (이 이유는이 기사 참조).

React 및 Vue.js와 같은 많은 프레임 워크가이 문제를 해결합니다. 그들은 가상 DOM이라는 솔루션을 제시합니다.

아이디어는 간단하다. DOM 트리를 읽고 업데이트하는 것은 매우 비쌉니다. 따라서 가능한 적게 변경하고 가능한 한 적은 수의 노드를 업데이트하십시오.

DOM API 호출을 줄이면 메모리에 DOM 트리 표현을 유지해야합니다. JavaScript 프레임 워크에 대해 이야기하고 있으므로 JSON을 선택하는 것이 합법적입니다.

이 방법은 Virtual DOM의 변경 사항을 즉시 반영합니다.

또한 성능 문제를 피하기 위해 나중에 Real DOM에 한 번에 적용 할 몇 가지 업데이트를 수집합니다.

React.createElement를 기억하십니까? 실제로이 함수 (직접 또는 JSX를 통해 호출)는 가상 DOM에 새 노드를 만듭니다.

업데이트를 적용하기 위해 Virtual DOM 핵심 기능인 조정 알고리즘이 작동합니다.

그 임무는 이전과 현재 Virtual DOM 상태의 차이를 해결하기 위해 가장 최적화 된 솔루션을 만드는 것입니다.

그런 다음 새 가상 DOM을 실제 DOM에 적용하십시오.

추가 자료

이 기사는 React 내부 및 가상 DOM 설명에 대해 자세히 설명합니다. 그러나 프레임 워크를 사용할 때 프레임 워크가 작동하는 방식에 대해 조금 아는 것이 중요합니다.

Virtual DOM의 작동 방식을 자세히 알고 싶다면 내 권장 사항을 따르십시오. 자신의 가상 DOM을 작성하고 DOM 렌더링에 대해 배울 수 있습니다.

읽어 주셔서 감사합니다. 이것이 React의 첫 단계에 너무 기술적 인 경우 죄송합니다. 그러나 이제 소품, 기능적 구성 요소, JSX 및 가상 DOM이 무엇인지 알고 싶습니다.

이 기사가 유용하다고 생각되면 버튼을 몇 번 클릭하여 다른 사람들이 기사를 찾도록하고 지원을 보여주십시오!

다가오는 기사에 대한 알림을 받으려면 나를 팔로우해야합니다

이 기사는 핵심 기능과 따라야 할 모범 사례 인 React를 소개하는“초보자를위한 React”시리즈의 일부입니다.
다음 기사>

다른 기사 확인

➥ JavaScript

  • 자신 만의 웹 개발 프레임 워크를 작성하여 JavaScript 기술을 향상시키는 방법
  • Vue.js로 작업하는 동안 피해야 할 일반적인 실수

➥ 팁과 요령

  • 고통스러운 JavaScript 디버그를 중지하고 소스 맵으로 Intellij를 포용
  • 노력없이 거대한 JavaScript 번들을 줄이는 방법

2018 년 2 월 6 일에 www.linkedin.com에 처음 게시되었습니다.