본문 바로가기

🤿 modern react deep dive

(3)

⚛️ 리액트 렌더링은 어떻게 일어나는가? 이전글 : 2024.07.11 - [🤿 modern react deep dive] - ⚛️ 가상돔과 리액트 파이버 ⚛️ 가상돔과 리액트 파이버👩🏻‍💻 오늘 다룰 내용- 가상돔이란? (feat. DOM이란? 브라우저 렌더링 과정)- 가상돔 만드는 과정 (feat. react fiber, 파이버 트리와 더블 버퍼링)- 리액트 파이버의 주요한 속성들DOM 이란? 가상돔pyotato-dev.tistory.com🖥️ 브라우저의 렌더링은 HTML과 CSS를 기반으로 웹페이지에 필요한 UI를 그리는 과정이다.🤔 리액트에서 렌더링의 개념은 뭐가 다를까?💡오늘은 리액트에서 렌더링이 무엇인지, 발생 조건이 뭔지 그리고 랜더링 과정에 대해 알아보자. 리액트에서 렌더링이란?리액트에서 렌더링은 브라우저가 렌더링에..

⚛️ 가상돔과 리액트 파이버 👩🏻‍💻 오늘 다룰 내용- 가상돔이란? (feat. DOM이란? 브라우저 렌더링 과정)- 가상돔 만드는 과정 (feat. react fiber, 파이버 트리와 더블 버퍼링)- 리액트 파이버의 주요한 속성들DOM 이란? 가상돔(virtual DOM)이 뭘까? virtual + DOM이라는 것인데, DOM이 뭔지 알면 와닿을 것 같다.DOM은 브라우저가 화면의 내용을 그려주기 위해 필요한 정보를 트리 모양으로 구성해 놓은 것이다.DOM생성 과정에는 브라우저 렌더링 과정에 포함되는데, 이 과정도 간단히 살펴보자.DOM은 웹페이지의 콘텐츠와 구조를 어떻게 보여줄지에 대한 정보를 담고 있는 웹페이지에 대한 인터페이스다. 브라우저 렌더링 과정은 다음과 같다. 0. 브라우저는 사용자가 요청한 주소를 방문해 H..

TMI. 1장에서 시작하지 않은 포스팅 https://github.com/Pyotato/fe_study/tree/main/modern_react_deep_dive 에서 이사했습니다.🚛💨🚚💨 fe_study/modern_react_deep_dive at main · Pyotato/fe_study📕 프론트엔드 공부를 하면서 끄적이는 이것 저것. Contribute to Pyotato/fe_study development by creating an account on GitHub.github.com 이전 모던 리액트 딥다이브를 읽으면서 정리했던 글은 깃허브에 작성되어 있지만,도중에 다시 글을 정리하기만을 위해 첫 장으로 돌아갈 수 없다고 판단하게 되었다. 그 이유는, 1. 1회독으로 모든 걸 완벽하게 읽었다고 보기 어려운 책 같다.2. ..

이전 1 다음

티스토리툴바