# VirtualDOM
React 동작 원리의 간단한 예제
🤚 들어가기 안녕하세요. 유튜브에 있는 "리액트 프로젝트 영상"을 보면서 코딩을 하던 중 정리도 하고, 정보를 나누고 싶어 글을 남기게 되었습니다. 여러분들은 리액트의 기본 동작원리에 대해서 잘 알고 계신가요? > 잘 정리된 글 하나를 소개해드립니다! ⭐ juno 님이 정리해주신 리액트의 동작원리 일단 위의 글을 읽고 오시는 것을 추천드립니다‼️(강추) 자 읽고 오셨겠죠?🫡 리액트가 리렌더링이 되는 경우 > React는 다음과 같은 경우에 리렌더링이 일어납니다. Props가 변경되었을 때 State가 변경되었을 때 forceUpdate() 를 실행하였을 때. 부모 컴포넌트가 렌더링되었을 때 라고 주노님께서 정리를 잘 해주셨습니
DOM, VirtualDOM
1. DOM? 웹페이지에서 버튼, 이미지, 텍스트 같은 것들을 Element(요소)라고 하고, 이 모든 요소를 담고 있는 웹페이지 화면을 document라고 한다. 웹페이지는 html을 분석해서 화면에 보여주는데, Element가 tree형태로 되어있는 것을 DOM(Document Object Model)이라고 한다. 개발자는 API를 사용해서 원하는 DOM 객체에 접근해 이를 조작할 수 있다. 2. 브라우저 렌더링 과정 먼저 일반적인 브라우저 렌더링 과정을 간략하게 설명해보려고 한다. DOM
React 필수 지식 #1
⭐ 리액트란? 페이스북에서 관리하는 웹 페이지의 컴포넌트를 렌더링하고 빌드하는데 초점을 둔 가장 인기있는 자바스크립트 라이브러리 UI 라이브러리기 때문에 자체적으로 전역 상태 관리, 라우팅, 빌드 시스템을 지원하지 않고 Redux, Mox, React-router등을 추가하여 사용해야함 ⭐ 리액트 특징 Vitual DOM을 사용해서 빠른 렌더링, 성능개선이 가능 -- 가상 돔의 장점 : 뷰에 변화가 있다면 그 변화는 실제 DOM에 적용되기 전에 가상 DOM에 먼저 적용 시키고 그 최종적인 결과를 실제 DOM에 전달하며 브라우저 내에서 발생하는 연산의 양을 줄이면서 성능이 개선됨 React는 View만 신경쓰기에 데이터 흐름이 단방향 데이터 흐름을 가짐 리액트는 UI를 여러 컴포넌트로 쪼개서 만듦 JSX라는 React문법이 HTMl과 비슷하여 예측 가능한 개발 가능 ⭐ Vitual DOM (가상 돔) 이벤트가 발생할 때 마
React가 VirtualDOM을 활용하는 방법
원티드 프리온보딩 프론트엔드 챌린지 4월 - 리액트 해부학 > > #### [Week 1-1] React가 VirtualDOM을 활용하는 방법 VirtualDOM, Reconciliation, Fiber > createRoot()과 render()의 역할 React가 Reconciliation을 통해 화면을 그리는 방법 Fiber Reconciler의 rendering효율 개선 [아하!모먼트] 면접에 대비하는 주니어 프론트엔드 개발자를 위해 > ### Tips vite 웹팩을 대체하는 번들러 (컴파일러 툴) 빌드가 매우 빠르다 0. VirtualDOM의 역할 >
React와 Virtual DOM
Virtual DOM의 탄생 배경 DOM(Document Object Model)이란..? DOM은 웹 페이지를 이루는 HTML 태그들을 자바스크립트가 이용할 수 있게 브라우저가 트리구조로 만든 객체 모델을 의미한다. DOM Tree 안에는 각각의 element에 상응하는 node들이 들어있다. DOM이 제공하는 API를 사용하여 돔 구조에 접근하여 원하는 element의 구조, 스타일 등을 변경할 수 있다. 이러한 행위를 DOM 조작이라고 하며 JavaScript의 getElementById()나 querySelector()와 같은 API가 이 역할을 한다. 즉, DOM은 HTML과 스크립팅 언어(JavaScript)를 서로 이어주는 역할을 하는 것이다. 
React - Render and Commit
What is "Rendering"? 리액트에서는 렌더링을 다음과 같이 묘사합니다. > React가 컴포넌트에게 props와 state의 조합을 기반으로 UI가 어떻게 생겼으면 좋겠는지 설명하도록 요청하는 프로세스 컴포넌트는 주방에서 재료로 요리를 만드는 요리사로써, 리액트는 고객의 요청을 접수하고 주문을 가져오는 웨이터로써 역할을 수행한다고 리액트 공식문서에서 설명하고 있습니다. 또한, 공식문서에서는 렌더링 과정을 다음과 같이 총 3단계로 설명합니다. >1. Triggering a render >2. Rendering the Component >3. Committing to the DOM Trigger a render 리액트에서 렌더링이 발생될 수 있는 경우는 총 2가지라고 설명합니
React 렌더링 최적화
✅ 렌더링 화면에 특정 요소를 그려내는 것 Vanila JavaScript를 사용하지 않고 React와 같은 프레임워크를 사용하는 이유 => 렌더링 과정을 잘 처리해 주기 때문에! | 브라우저 렌더링 DOM 요소를 계산하고 그려내는것 HTML, CSS => DOM, CSSOM => 결합 => 위치 계산 => 그리기 브라우저에서 제공하는 DOM API를 JavaScript를 통해 호출하면서 브라우저에 그려진 화면을 변화시킨다 | Vanila Javascript vs React Vanila Javascript 명령형, 절차형 DOM에 직접 접근하고 수정해야한다 React 선언형 (React의 가장 큰 장점) 애플리케이션에서 보여주고 싶은 핵심 UI를 선언하기만 하면 됨 DOM 을 조작하여 UI를 그려내고 변화시키는 일은 라이브러리, 프레임워크가 하게 된다 ✅ React의 리렌더링 React의
React - Virtual DOM
리액트 사용하면서 가상돔에 대한 기초적인 부분을 들었던 것 같은데.. 생각해보려고 하면 잘 떠오르지 않아 글을 적으면서 이해를 해야겠다는 생각을 했다. 가상 돔(Virtual DOM)에 대해 한번 알아보즈아! DOM 이란? 먼저 가상 돔을 알아보기 전에 DOM에 대해 알아보고 가보자. Document Object Model 웹 페이지에 접속하면 보이는 모든 요소들 버튼, 이미지, 텍스트 등등의 모든 요소들을 담고 있는 것이 바로 Document이다. 브라우저는 화면에 보이는 html을 분석하여 화면에 띄워준다. DOM은 html내부에 있는 요소들을 트리 구조로 표현한 것이다. DOM 트리 안에는 각각의 요소에 상응하는 노드가 들어있는데, DOM에서 제공하는 `
DOM의 새로운 발견! Virtual DOM 동작 원리
virtual DOM 의 기원을 살펴보기 위해 브라우저의 렌더링 과정을 이해할 필요가 있어요 브라우저 렌더링 과정 HTML은 렌더링 엔진을 거쳐 DOM 트리를 생성한다. 렌더링 엔진 (사파리의 WEBKIT, 파이어폭스의 GECOK...) DOM 트리 : HTML를 파싱하여 DOM 노드로 이루어진 트리 CSS는 렌더링 엔진 을 거쳐 CSSOM 트리를 생성한다. DOM과 CSSOM을 결합하여 렌더링 트리를 형성한다. ** render tree: DOM + CSSOM 렌더링 트리에서 레이아웃 처리를 통해 각 노드의 위치와 크기를 계산한다 브라우저 화면의 어떤 위치에 어떤 크기로 출력될지 계산 하는 단계 페인팅 개별 노드를 화면에 페인팅한다. DO
가상돔(VirtualDOM) deep dive
가상돔 원리... 복잡해 보이는데? >SPA 웹 기술에 근간 가상돔 근데 이거 어떻게 만들었지? 그냥.. 갑자기 궁금해졌다. 가상돔 만들 생각은 왜 했으며(why, how), 어느 단계에서 가상돔과 비교 후 적용하는지. diff 알고리즘은 구체적으로 어떻게 걸러내는건지. Virtual DOM에는 실제 DOM의 정보 중 어디까지 가지고 있을지.... 하나씩 알아보자 1. 렌더링 과정 우선 먼저 렌더링 과정부터. html, css file 파싱 후 DOM tree & CSSOM tree 생성 Dom tree + CSSOM tree = render tree 생성 렌더 트리에 적용된 element의 위치 계산 reflow 과정 (위치) 작업한 렌더링 트리를 화면의 픽셀로 변환하면서 paint (색칠) 각각 paint된 레이어를 합성하면서 렌더링 완료 
가상돔
가상돔이란 가상 DOM 이란 실제 DOM의 구조를 분석하여, 메모리에 저장하는 것을 통해, 렌더링 시 마다 상태값 변경을 통해 이전/이후 달라진 부분을 비교하는 프로그래밍 매커니즘을 말한다. 가상돔은 일종의 변화를 모아서 한 번에 처리하는 Batch 작업과 유사하다. 또한 순수 객체로 추상화 되어 있어 브라우저에 종속되어 있지 않으며, 테스트에 용이하다. React, Vue는 왜 가상돔을 사용하는가 >키워드 DOM의 단점 개선 브라우저 렌더링을 더욱 빠르게 하기 위해서이다. 우리는 DOM 이벤트를 활용하여, 사용자와의 상호작용을 통해 현재 페이지 내용을 추가하거나 업데이트 한다. 이전 공부를 통해 DOM을 트리구조를 이루고 있다는 것을 알고 있다. 만약 가상돔 없이 기존 DOM 방식으로 아래의 사진에서 Option 업데이트 하는 경우, 다음과 같은 문제가 발생할 수 있다. 
#1. DOM 극복하기 위한 Virtual DOM
DOM은 무엇인가 > #### 요약 Document Object Model의 약자 동적 프로그래밍 언어의 연결고리 그러니깐, DOM은 동적프로그래밍 언어(대표 예: 자바스크립트)가 정적언어(HTML/CSS)에 접근할 수 있는 매개 역할을 하는 도구! 결과적으로 DOM 안에는 HTML, CSS 언어(문서작성, 스타일, 내용 등)로 작성된 Document가 존재하며(정적인 상태), 작성된 Document에 JavaScript로 동적인 효과(ex.표현, 저장, 조작 등)를 주기 위해 반드시 DOM을 거쳐야 함. DOM구조 참고: DOM은 트리형태로 HTML 등 Element로 가지고 있음! DOM API로 트리형태의 노드에 접근 
직접 느낀 자바스크립트와 리액트 차이
회사에서 자바스크립트로 개발을 하다가, 현재는 모종의 이유로 리액트로 migration 중입니다. 그 과정에서 Vanilla JS와 React의 차이점을 자연스럽게 알게 되었습죠. > 🤟직접 둘 다 다루어보면서 느꼈던 주관적인 차이를 적어보려고 합니다. 1. Component > Components are like functions that return HTML elements. > 번역 : 컴포넌트는 HTML 요소를 반환하는 함수 같은 무언가이다. > 🗣 PHP School React에서는 자연스럽게 Component를 사용하지요? 그런데 Vanilla JS에서는 Component라는 개념이 없습니다. 직접 Node들을 중첩시켜서 사용해야 합니다. 예시를 통해 살펴봅니다. ✓ Vanilla JS Elemements !codesandbox[trustin
[Today I Learned] 12월 1주차 day2
React react는 spa 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. React는 facebook에서 제공해주는 프론트엔드 라이브러리라고 볼 수 있다. 웹/앱의 View를 개발할 수 있도록 하는 인기있는 라이브러리라고 볼 수 있다. 특징 component 기반구조 virtual dom props and state jsx virtualDom (가상돔) 실제 dom구조를 반영한 상태로 메모리에 있는 가상의 dom 이다. 가상돔은 돔이 생성 되기 전, 이전 상태값과 수정사항을 비교하여 달라진 부분만 dom에게 한번에 전달하여 딱 한번만 랜더링을 진행한다. 돔에 직접 접근해도 문제가 되지 않지만, dom이 직접 변경된다면 사소한 변경사항에도 전체가 재랜더링 되기 때문에 브라우저에 과부하가 올수 있다. 따라서 최대한 dom에 직접 접근하지 않기 위해서 virtual dom이 등장했다. CRA (Create Re
Virtual DOM은 무엇인가
Virtual DOM ? > Virtual DOM은 실제 DOM 노드 트리를 복제한 JS 객체 실제 DOM 보다 가벼움! (DOM 관련 API 메서드를 가지고 있지 않기 때문) 🙄 Virtual DOM은 왜 만들었을까? Virtual DOM 없이 그냥 DOM 을 조작하게 되면 DOM의 변경이 있을 때 마다 브라우저 렌더링 과정 Parsing ~ Paint 까지 모두 새로 해야하기 때문에 비용이 크게 든다!... 💰 리액트, 뷰 같은 SPA 방식의 웹 개발은 많은 DOM 조작을 필요로 하게 되는데 이때의 렌더링 비용을 낮추기 위해 만들어졌다. ⚙️ 동작 과정 > 실제 DOM 노드에 변화가 생기면 새로운 Virtual DOM 트리를 생성 현재 Virtual DOM과 이전 Virtual DOM을 비교 변경된 부분을 실제 DOM에 반영 🤨 근데 변화가 생길 때 마다 새로운 Virtual DOM을 생성하면 비용이 너무 커지지
[React] 리액트에서 virtual DOM이란?
전에 virtual DOM을 사용하게 된 이유와 작동 원리에 대해 알아보았다. 그렇다면 CSR의 대표주자인 React에서 virtual DOM은 어떻게 동작하고 있을까? 리액트에서 virtual DOM이 어떻게 작동될까? 이와 같이, 리액트에서 컴포넌트를 만들때 JSX문법을 활용하게 되는데, JSX는 JavaScript를 확장한 문법이기 때문에 정확히는 JavaScript 문법이 아니다, 따라서 Babel과 같은 툴에 의해 jsx는 JavaScript로 변경되는데, 이때 아래와 같은 createElement함수를 호출하게 된다. 함수를 통해 jsx는 다음과 같은 객체로 변화되는데, 이때 type과 props라는 key가 존재하는데, type은 DOM 노드에 태그 이름이고, props는 jsx에 포함된 모든 속성들을 포함한다. 이렇게 생성된 자바스크립트 객체를
virtual DOM이란?
virtual Dom이란? virtual DOM에 대해 알기 위해선 기본적으로 브라우저 랜더링 과정과 DOM에 생성원리부터 알아야 한다. 브라우저 랜더링 과정을 큰 틀로 나뉘면 DOM tree 생성 Render tree 생성 Layout 과정 실행 Paint 과정 실행 이렇게 4개의 과정으로 진행이 된다라고 보면 된다. 1. Dom tree 생성 Dom 트리는 HTML 파서에서부터 브라우저 엔진이 DOM node 트리를 만든다. 2. Render tree생성 HTML을 기준으로 DOM tree를 생성하면, CSS와 Alignment를 파싱하여 style 정보를 기준으로 랜더트리를 생성한다. 3. Layout 과정 실행 이 과정에서 각 컴포넌트는 좌표가 주어지고, 정
[Web] 가상돔 (Virtual DOM) 작성해보기 (2) - JSX
이전 게시물과 이어짐 이전 게시물에서 리얼 DOM 트리를 가상돔으로 작성해보는 작업을 해봤었는데, 가상돔은 가독성이 좋지 못하다. 실제로 내가 가상돔을 작성해보면서 가독성 측면에서 보았을 때는 단점이라는 생각이 들었다. 이러한 가상돔의 단점을 해결하기 위해 JSX가 나타나게 되었다. > JSX 정리! JSX는 HTML과 굉장히 유사하지만, 실제로 보면 자바스크립트이다. 자바스크립트를 확장한 문법으로, 자바스크립트의 모든 기능을 포함하고 있다. 자바스크립트 코드안에서 UI 작업을 할 때 가독성을 높이는데 더 도움이 된다. + (JSX를 사용하기 위해서는 Babel 관련 패키지를 설치 해야한다.) 가상돔을 JSX를 이용해 수정 다음과 같은 가상돔을 작성했을 때, JSX를 이용해 다음과 같이 수정할 수 있다. HTM
[Web] 가상돔 (Virtual DOM) 작성해보기 (1)
이전 게시물과 이어짐 > 💡 가상돔(Virtual DOM) 한줄 정리! 가상돔은 HTML 뷰에 변화가 있을 때, 이전의 가상돔과 새로운 가상돔을 비교해 변경된 내용만 감지해 DOM에 적용하는 것을 말한다. 가상돔이 왜 필요할까? DOM의 변화가 급격하게 많이 발생하면, 그만큼 복잡도가 증가하게 되고, DOM의 렌더링 과정이 계속해서 반복적으로 일어나게 된다. 이는 매우 비효율적이다. 때문에 등장한 개념이 가상돔이다. 가상돔을 이용해 변경된 내용만 DOM에 적용해 브라우저 성능을 개선 할 수 있다. 가상돔의 특징 순수 객체라는 점 브라우저에 종속적이지 않다는 점 때문에 브
22.10.3(React Virtual Dom)
Virtual Dom에 대해서 1. DOM? HTML, XML 다큐먼트와 상호작용하고 표현하는 API 브라우저에서 로드되며 노드, 트리로 표현된다. HTML이 돔은 아님 JS와 같은 스크립팅 언어를 이용해서 해당 문서에 노드 추가, 삭제, 변경 , 이벤트처리 등 수정 > document.getElementByid... : DOM API 썼다. 2. 왜 VD를 접목했을까? => DOM의 문제점 파악하자. 작동 원리 돔트리 생성 렌더트리 생성 : 각 요소들의 스타일이 계산 & 매칭 3 .레이아웃 : 스크린의 좌표가 주어지고 정확한 위치로 배치되게. 페인팅 : 렌더링된 요소에 색깔 입힌다. 메서드로 됨. 문제점? : 복잡해지는 구조, 사용자의