Rendering

primav·2024년 7월 7일

React

목록 보기
5/35
post-thumbnail
✨ 본 포스팅은 '솔로스타의 React 렌더링'이라는 영상을 참고하여 공부하고 기록한 글 입니다.

솔로스타의 React 렌더링

Rendering (렌더링)

  • Render: 함수가 호출 되는 것
  • Commit: 반환된 객체 (virtual DOM)이 Real Dom에 반영되는 것

그렇다면 개발자가 해야하는 일은 무엇일까?
➡️ 함수 작성만 하면 나머지는 전부 React가 해줌 (함수 호출도!!)

Tree 구조로 표현

위의 트리에서 리액트가 하는 역할은 무엇일까?

  1. App 함수 호출
  2. Avatar -> profile -> likes -> link 순으로 재귀 호출하여 렌더링 진행

⭐️ 렌더링 된 결과 => 객체 !! (Virtual DOM)
++ 이 객체가 real DOM에 반영되면 웹페이지가 나옴

Re-Rendering (리렌더링)

  1. 맨 처음 렌더링 되었을 때:
    (초기값 세팅)
  2. 리렌더링 되었을 때:
    (이모티콘 바뀜)

0개의 댓글