[250818] TIL

Today I Learned (2025-08-18)

리액트 렌더링 방식 살펴보기

https://www.youtube.com/watch?v=N7qlk_GQRJU

Critical Rendering Path

• 우리가 아는 렌더링 방식
• DOM,CSSOM, Render Tree, layout (요소들의 배치를 결정), patinting (실제로 화면에 그려내는 과정)

업데이트는 어떻게 이루어질까?

• 자바스크립트가 DOM을 수정하면 업데이트가 발생함
• Reflow, Repaint 발생
• 리액트에서는 자동으로 변경사항을 모아뒀다가 돔에 업데이트 되도록 해줌

리액트 프로세스

• Render Phase
  • 컴포넌트를 계산하고 업데이트 사항을 파악하는 단계
  • 컴포넌트들을 호출하고 -> react element라고 부르는 객체 만듬 -> 객체들의 모임 -> 버츄얼돔
  • Diffing 발생, 재조정, 업데이트 많이 발생해도 한 번만 되도록 함
  • 항상 최고의 속도를 보장하지 않음, 생성하고 비교하는데도 연산이 소요 되기 때문
  • 스벨트 ? 버츄얼 돔을 사용하지 않는 것도 있다.
• Commit Phase
  • 변경사항을 실제 DOM에 반영하는 단계
  • 버츄얼돔 <-> 액츄얼돔 비교

복잡하게 하는 이유는 뭘까?

• DOM 수정을 최소화하기 위해서

실행 컨텍스트란 ?

• 자바스크립트 엔진이 실행될때 실행 환경 정보를 담고 있는 컨테이너입니다.
• 실행 컨텍스트는 크게 변수 환경, 렉시컬 환경(스코프), this 바인딩 환경 정보를 가지고 있습니다.
• 렉시컬 환경이란 자신이 선언된 위치 기반으로 변수/함수와 외부 스코프 참조를 저장한 실행 컨텍스트 구성요소이다.
• 스택을 이용해 관리됩니다.
• 렉시컬 환경은 실행 컨텍스트 안에서 변수와 함수 식별자 정보를 담는 구조

렉시컬 스코핑

• 함수가 정의된 위치를 기준으로 스코프가 결정

다이나믹 스코핑

함수가 호출된 위치를 기준으로 스코프가 결정

기타

• 요가
• 면접, 면접 준비