# virtual DOM

32개의 포스트
post-thumbnail

JSX

JSX는 화면에 렌더링 될 요소들을 생성하는 것으로 html처럼 생겼다. 특징으로는 내부에 {}으로 감싸진 표현식을 작성할수 있다.{}으로 감싸진 표현식은 태그 내부의 컨텐츠와 속성으로도 사용할수 있다. 여기서 특이한 점은 class를 className으로 사용하는데

2021년 10월 6일
·
0개의 댓글
post-thumbnail

React란?

리액트는 페이스북에서 개발하고 관리하는 UI 라이브러리입니다. 앵귤러가 웹 애플리케이션에 필요한 다수의 기능을 제공하는 것과는 달리 리액트는 UI 기능만 제공합니다.따라서 전역 상태 관리나 라우팅 또는 빌드 시스템 등을 각 개발자가 직접 구축해야합니다. 전반적인 시스템

2021년 10월 4일
·
0개의 댓글
post-thumbnail

[React #2] HTML + JavaScript == JSX

JSX syntax extension for JavaScript 자바스크립트 확정바전 React.js를 사용하기 위해 JSX 문법이 포함되어 있다면, 해당 파일을 정규 자바스크립트 문법으로 변환시키는 컴파일 과정이 필요하다. 장점: html 태그를 그대로 사용하기 떄

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

React 동작 구조 (Virtual DOM)

이미 많은 프로젝트를 하며 React로의 개발은 능숙하다. 하지만 동작 구조에 대해서는 두루뭉실하다. 동작 구조부터 확실히 잡고 가면 한 단계 더 발전할 수 있을 것 같단 생각이 든다. React와 Virtual DOM 렌더링 방식을 정리를 해보자.

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

[React] 1. 리액트란?

React ⭐ 리액트(React)는 페이스북에서 개발한 오픈소스 UI 라이브러리로, 유저 인터페이스를 만들기 위한 Javascript 라이브러리 이다. 개발자가 직접 DOM을 다루지 않아도 React가 데이터 상태에 따라 자동으로 UI를 관리해주므로 특정 상태에 따른

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

virtual dom 이 좋은건가?

사람들에게 가장 사랑받는 기술들은 그 사랑에 충분히 보답하고 있을까?

2021년 9월 13일
·
0개의 댓글
post-thumbnail

Critical Rendering Path 와 Virtual DOM

브라우저 렌더링 프로세스 먼저 DOM 조작을 하게 되면 보통의 경우 tree를 수정하게 된다. 그럼 render tree - layout - painting의 단계를 다시 거치게 된다. view의 변화를 감지하면 virtual DOM을 1차적으로 변화시킨다.그런 뒤

2021년 9월 13일
·
0개의 댓글

기술 면접 예상 질문 정리(1)

DOM은 HTML, XML 문서의 프로그래밍 interface이다. 기본적으로 여러 프로그램들이 페이지의 콘텐츠 및 구조 그리고 스타일을 읽고 조작할 수 있는 API를 제공한다.DOM의 생성 방식DOM은 원본 HTML문서의 객체 기반 표현 방식이며 DOM의 개체 구조

2021년 9월 8일
·
0개의 댓글
post-thumbnail

[WEB] 브라우저의 동작 원리

웹 브라우저는 원래 웹서핑 전용 애플리케이션에 불과했다. 그러나 HTML5 등이 발달하면서 웹 브라우저는 점차 기능이 확대되었고, 2020년대 들어서는 거의 모든 프로그램의 기능을 잡아먹고 있다. - 나무위키 나무위키에서 나온 것처럼, 책 커리어 스킬에서는 모바일 웹앱

2021년 8월 13일
·
0개의 댓글
post-thumbnail

Virtual DOM 넌 누구냐

React의 작동 방식에 대해서 확실히 이해하고 넘어가기 위해서 공부하게 되었다.Virtaul DOM을 찾아보면서 초보인 나한테는 사전적으로 알아야 할 기본 개념 및 지식들이 조금 많이 있었던 것 같다.그러한 것들 부터 하나하나 이해하고 정리해보려고 한다.웹 서버에서

2021년 7월 6일
·
0개의 댓글
post-thumbnail

Virtual DOM에 대해 알아보자!

어제는 Reflow와 Repaint에 대해 알아보자라는 글을 썼습니다. 이는 사실, 이번 Virtual DOM이라는 아이를 알기 위한 선수 지식이기에 썼습니다. 😅현재 SPA를 하기 위해선, svelte가 아니라면, 기본적으로 대다수의 SPA 라이브러리, 프레임워크가

2021년 6월 24일
·
0개의 댓글

TIL. 28 React - Basic, Router

JavaScript와 기본적인 구성은 비슷하지만, 다른 언어라고 봐도 무방하다고 생각하며 HTML, CSS, JS가 모두 포함되어 있다.React(리액트)는 UI를 효과적으로 보여주기 위한 JavaScript의 라이브러리이다.페이스북의 지속적인 관리로 생태계가 활성화

2021년 6월 23일
·
0개의 댓글
post-thumbnail

[React] Virtual DOM

Virtual DOM이란 문자 그대로 가상의 DOM을 뜻하며, React의 핵심 원리이다.<span style="color: 동적인 웹에서는 사용자의 요청이나 조건 등에 따라 사용자가 보게 될 뷰(view)를 변경해주어야 한다. 그런데 이렇게 특정 부분의 뷰를 변

2021년 6월 20일
·
0개의 댓글

[React] 리액트는 왜 만들어졌을까?

#React #Virtual Dom

2021년 6월 19일
·
0개의 댓글
post-thumbnail

[React]REACT에 대해 Part 1

React는 Facebook이 만든 사용자 UI 구축을 위한 라이브러리이다.1.Virtual DOM Virtual DOM은 기존의 DOM의 한계를 개선하기 위해 나온 대안책이다. DOM(Document Object Model)은 말 그대로 문서 객체 모델이다. HTM

2021년 5월 27일
·
0개의 댓글
post-thumbnail

[React] Virtual DOM과 브라우저의 렌더링 과정

리액트의 주요 특징 중 하나는 Virtual DOM을 사용한다는 것입니다.

2021년 5월 20일
·
0개의 댓글

DOM을 깨우치다 정리 (8)

virtual DOM, 가상 돔과 관련이 많음DocumenetFragment 노드를 사용하면 라이브 DOM 트리 외부에 경량화된 문서 DOM을 사용할 수 있다. 마치 라이브 DOM 트리처럼 동작하되, 메모리상으로만 존재하는 빈 문서 템플릿으로 자식 노드를 메모리상에서

2021년 4월 27일
·
0개의 댓글

react - start

리액트는 많은 양의 데이터를 화면에 보여주기 위한 라이브러리 입니다. 그래서 리액트를 사용할 땐 얼마나 더 효과적으로 데이터를 다루고 화면에 보여줄지 고민하게 되는거 같습니다.많은 양의 데이터를 화면에 렌더링하게 되면

2021년 4월 19일
·
0개의 댓글

DOM( Document Object Model ), Virtual DOM, React DOM 간단 정리

DOM 즉, 문서 객체 모델이란 HTML, XML 문서의 프로그래밍 인터페이스이다. HTML의 구조화된 표현 ( body, head, div ... ) 을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을

2021년 4월 14일
·
0개의 댓글

Virtual DOM

DOM의 정의는 문서의 구성요소들을 객체로 구조한 것 React는 UI 라이브러리이며 React DOM은 웹 사이트에 출력 즉, render를 도와주는 모델이다. Virtual DOM은 DOM을 추상화한 가상의 객체를 메모리에 만들어 놓은 것이다. 즉 DOM을 직접

2021년 4월 8일
·
0개의 댓글