본문 바로가기

Rendering

(2)
Browser Rendering vs React Rendering - (2) 개요 이전 글에서는 Browser Rendering에 대해서 살펴보았다. 이번에는 비교하려고 했던 React Rendering을 살펴보고 둘의 차이를 명확하게 정리하면서 마무리하려고 한다. React Rendering 이는 브라우저 렌더링에서의 해석과 동일하게 Rendering의 주체가 React인 것이다. 리액트의 렌더링은 크게 보면Trigger, Render Phase와 Commit Phase으로 나누어져 있는데, 이 과정을 하나씩 살펴보자. Trigger 이름 그대로 렌더링을 촉발시키는 것이다. 리액트는 기본적으로 렌더링이 두 가지 케이스로 나뉜다. 최초 렌더링 리렌더링 첫 번째로 최초 화면 진입 시에는 당연하게 화면에 그려야 할 결과물이 필요하다. 따라서 렌더링이 일어나게 된다. 최초 렌더링 이후..
Browser Rendering vs React Rendering - (1) 개요 React로 개발을 계속하다 보면 '렌더링'이라는 단어는 당연하게도 React에서의 렌더링으로 이해하는 경우가 많은데, 실제로 이는 문맥에 따라 브라우저 렌더링을 가리킬 때도 많이 있다. 실제로 가끔 이러한 상황을 마주하면 혼동하는 경우를 자주 목격하여 이번을 계기로 정확하게 정리하고 가려고 한다. Rendering 먼저, 두가지 케이스에 공통으로 등장하는 렌더링(Rendering)이 무엇인지부터 정확하게 정리하고 가려고 한다. 기본적으로 렌더링(Rendering)이란, 구글 검색을 통해 나오는 정의를 보면 사용자에게 보여지는 시각적 요소들을 생성하고 화면에 표시하는 과정을 의미한다. 하지만 조금 더 단순하게 본다면 컨텐츠를 픽셀로 변경하는 과정이라고 볼 수 있다. (여기서 컨텐츠는 브라우저 내에서..