# virtual DOM

96개의 포스트

Unit4 회고

[React]심화 🔆 Virtual DOM Virtual DOM > Virtual DOM이 나오게 된 배경🤔 실제 DOM은 스크립팅 언어가 접근 및 탐색하는 속도가 빨라 탐색 후 변경 및 업데이트하는 속도는 역시 빠르다. 하지만 JavaScript로 조작하는 DOM

4일 전
·
0개의 댓글
·
post-thumbnail

React 심화

DOM은 Document Object Model의 약자로, 뜻을 그대로 풀자면 문서 객체 모델을 의미DOM은 브라우저가 트리 구조로 만든 객체 모델트리는 “데이터 저장"의 의미보다는 “저장된 데이터를 더 효과적으로 탐색”하기 위해 사용되므로, 빠른 자료 탐색 성능이 장

2022년 11월 25일
·
0개의 댓글
·

React의 Virtual DOM

DOM은 Document Object Model의 약자로, 뜻을 그대로 풀자면 문서 객체 모델이다.문서 객체란 브라우저가 JavaScript와 같은 스크립트 언어가 ,,와 같은 태그들에 접근하고 조작할 수 있도록 태그들을 트리 구조로 객체화 시킨것을 의미한다.즉, DO

2022년 11월 25일
·
0개의 댓글
·
post-thumbnail

[TIL] React 심화

React는 DOM의 사본인 Virtual-DOM 을 가지고 있다. 이는 Real-DOM이 동적 UI에 최적화된 Interface가 아니라는 약점을 극복하기 위함이다.예를 들어서, 모던웹은 사용자에게 동적인 UI를 제공하고 개발자는 이를 구현하기 위해 DOM을 통해 X

2022년 11월 25일
·
0개의 댓글
·
post-thumbnail

[ React ] Virtual DOM과 Component

👇 선행 개념 > #### 💡 "절차적(명령형)"프로그래밍과 "선언적" 프로그래밍의 차이 절차적(명령형) => 복잡, 유지보수의 어려움 = 생산력 저하 -원하는 결과를 위해 "어떻게(How)"해야하는지에 중점 -원하는 결과를 만들기 위한 "절차"를 프로그래밍 하는 방식 ex) Vanila Js DOM 방식 선언적 => 단순, 유지보수...

2022년 11월 22일
·
0개의 댓글
·
post-thumbnail

[ React ] React를 사용하는 이유?

👇 선행 개념 사용자 인터페이스(UI, User Interface) : UI는 사용자가 제품/서비스를 사용할 때, 마주하게 되는 면 = 사용자가 제품/서비스와 상호작용할 수 있도록 만들어진 매개체를 말한다 사용자 경험(UX, User Experience) : 사용자 경험, 어떠한 제품/서비스를 직간접적으로 이용하며 느끼는 종합적인 만족을 말한다 > ...

2022년 11월 22일
·
0개의 댓글
·

virtual DOM이란?

먼저 DOM(Document Object Model)에 대한 개념부터 알아봤다.웹을 이루는 HTML태그들을 자바스크립트가 이용할 수 있도록 웹브라우저가 트리구조로 만든 객체모델이라고 한다.HTML/CSS <--> DOM <--> JavaScript windo

2022년 10월 31일
·
0개의 댓글
·
post-thumbnail

DOM & Virtual DOM

DOM은 문서 객체 모델로 HTML, XML 문서의 프로그래밍 인터페이스다. DOM은 문서의 구조화된 표현을 제공하고 프로그래밍 언어가 DOM구조에 접근할 수 있는 방법을 제공하여 문서의 구조, 스타일, 내용 등을 변경할 수 있게 한다.현실에 있는 것을 특정 관점에서

2022년 10월 26일
·
0개의 댓글
·

Virtual DOM

브라우저DOM 블로깅이전에 브라우저와 DOM에 대해 정리한 글이다.DOM에 변화가 생기면 렌더 트리를 재생성하고 레이아웃을 만들고 페인팅하는 과정을 변화할 때마다 반복한다. SPA에서는 DOM의 변화가 빈번하게 일어나는데 변화가 일어날 때마다 위 과정이 반복되니 연산도

2022년 10월 26일
·
0개의 댓글
·

프론트엔드 개발자가 되기위한 여정-46

밸하!밸로그 여러분 안녕하세요! 오늘의 주제는 바로 virtual DOM입니다! 도대체Virtual DOM이란 무엇일까요?? 직역하자면 가상DOM입니다!그럼 본격적으로 알아볼까요??가상 DOM은 이상적인 또는 "가상"UI표현이 메모리에 유지가 되며ReactDOM과 같

2022년 10월 24일
·
0개의 댓글
·

React 기술면접 준비

리액트에는 실제 DOM의 복사본인 가상의 돔, Virtual DOM이 있다. 리액트는 이 가상의 DOM 객체에 접근해서 변화 전과 후를 비교하고 바뀐 부분을 렌더링한다.리액트는 빠른 렌더링을 위해서 Virtual DOM을 사용한다.Virtual DOM은 변화를 감지하는

2022년 10월 19일
·
0개의 댓글
·
post-thumbnail

[React] DOM과 Virtual DOM의 차이

트리 구조로 되어있는 객체모델.웹페이지나 웹 앱에 있는 HTML 요소들을 구조적으로 표현한 것이다.DOM은 메모리에 값을 가지고있는 표현식이다. HTML DOM은 노드를 탐색하거나 수정할 수 있는 API를 제공한다. (DOM Tree의 노드)DOM은 getElement

2022년 10월 6일
·
0개의 댓글
·

React

리액트 보강하는 차원에서 리액트 공부 Virtual DOM 리액트의 차별점이라고 할 수 있는 Virtual DOM은 > 모델이 변하면 > 뷰에서 변화 , 뷰에서 변하면 > 모델 변화하는 기존 과정에서 > 변화 자체를 안하고 데이터가 바뀌면 뷰를 날려버리고 새로 만들면 어떨까 하는 생각을 함 > 하지만 매번 날려버리고 새로 만들기엔 브라우저가 감당하...

2022년 10월 3일
·
0개의 댓글
·
post-thumbnail

[리액트] 1. 리액트 시작

1. 리액트 시작 1-1. 왜 리액트인가 한때 자바스크립트는 웹 브라우저에서 간단한 연산을 하거나 시각적인 효과를 주는 단순한 스크립트 언어에 불과했다. 하지만 현재는 웹 애플리케이션에서 가장 핵심적인 역할을 합니다. 더 나아가서 서버 사이드는 물론 모바일, 데스크톱

2022년 9월 29일
·
0개의 댓글
·
post-thumbnail

React Virtual DOM , useLayoutEffect

React는 랜더링시 Virtual DOM과 Real DOM을 비교하여 바뀐부분을 비교후 적용한다.DOM은 트리 구조로 되어있고 트리는 저장된 데이터를 효과적으로 탐색하기 위해 설계 되었다.DOM은 트리 구조이기 때문에 특정 요소가 업데이트가 되면 해당 node에 있는

2022년 9월 28일
·
0개의 댓글
·
post-thumbnail

리액트의 특징

리액트의 주요 특징 중 하나는 리액트는 가상돔을 사용한다는 것이다.이 과정을 통해 웹 페이지가 그려지게 되는 건데,문제는 어떤 인터렉션에 의해 DOM에 변화가 생기면그 때마다 Render Tree가 재생성되니까 말그대로 저 과정이 다시 반복되는 거임인터렉션이 적은 웹은

2022년 9월 17일
·
0개의 댓글
·
post-thumbnail

React - Virtual DOM

Document Object Model (문서객체모델)의 약자이다.문서 객체 란 Web Browser 안에서 HTML 문서에 JavaScript 가 접근할 수 있도록 <html 태그> 들을 객체 (object) 로 만든 것이다. DOM은 애플리케이션의 UI를 나타

2022년 9월 16일
·
0개의 댓글
·

React(intro)

정리 어떠한 흐름으로 오늘날 React가 많이 사용되고 있는지 설명할 수 있다. React가 무엇인지 정의할 수 있다. Component의 개념과 종류에 대해 설명할 수 있다. JSX에 대한 정의와 기본 특성에 대해 설명할 수 있다. CRA를 설치하고 폴더와 파일이

2022년 8월 29일
·
0개의 댓글
·

Virtual DOM

Virtual DOM

2022년 8월 26일
·
0개의 댓글
·

React 얕은 비교

깊은 비교, 얕은 비교

2022년 8월 10일
·
0개의 댓글
·