Rendering

✨ 본 포스팅은 '솔로스타의 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. 리렌더링 되었을 때:
   (이모티콘 바뀜)