[React 까보기 시리즈] Virtual DOM 이 자바스크립트 객체라고? render phase 와 commit phase 로 나누어서 동작 원리 살펴보기

[@withBoaz]

리액트 톺아보기 시리즈 goidle.github.io/react/in-depth-react-intro/ 를 기반으로 만들었습니다

[@cheerupforyou]

모호하게 알고있던 개념들인데 이번에 확실하게 알고갑니다! 감사합니다~

[@user-yesyes]

오늘도 감사합니다ㅎㅎ

[@뚝딱-l3o]

잘들었습니다!

[@근이-w4l]

좋은 강의 감사드립니다!

[@domic93]

오 게임이랑 같은 원리로 더블버퍼링을 쓴다는게 흥미롭네요

[@레도도-n7b]

정말 유익한 강의 감사합니다.
react element는 DOM Tree를 만들기 위해 필요한 정보들을 가진 객체라고 이해했는데, react에서의 node는 무엇인지 궁금합니다!

[@withBoaz]

node 의 정의를 트리를 이루는 구성요소라고 한다면 리액트의 virtual DOM tree 를 이루는 구성요소는 fiber 라고 할 수 있습니다. fiber에 대한 내용은 시리즈를 보시면서 알수 있습니다 다만 해당 내용을 먼저 알고 싶다면 ua-cam.com/video/lMuU0uTUoAQ/v-deo.htmlsi=oYHfvwozzC_vMdaH 이 영상을 참고해주세요 감사합니다 :)

[@CYS-bx5ec]

감사합니다! 다음편은 언제쯤 나올까요?

[@withBoaz]

토요일 8시에 업로드할 예정입니다..!

[@hc4274]

올려주신 영상 잘 보고 있습니다~ 궁금한게 있어 댓글 남깁니다~
3:23 코드에서
1.const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement
);
위 부분이 Root Node를 가리키는 것인가요...?
2.root.render();
위 코드 와 같이 root.render를 통해 컴포넌트를 마운트 하면 그때 Root Node와 연결된 실제 돔에 마운트 된 current트리를 생성하게 되고 이때 자가복제를 통해 workInProgress 트리도 같이 생성되면서 더블버퍼링 구조를 갖게 되는 것인가요...?
제가 제대로 이해한것이 맞는지 궁금해서 여쭤봅니다~!

[@withBoaz]

1번
맞습니다 정확합니다. 참고하시라고 리액트 공식문서 createRoot 함수 관련 링크 남깁니다
react.dev/reference/react-dom/client/createRoot#createroot
2번
맞습니다 조금 더 자세히 설명드리면, current 트리는 돔이 아니기 때문에 직접 돔에 마운트 되는 것은 아니고, 돔에 마운트 된 돔 엘리먼트들에 관한 정보를 담고 있는 자바스크립트 객체(fiber node)의 트리라고 이해하시면 좋을것 같아요

[@hc4274]

@@withBoaz 답변 감사합니다~!

[@liebespaar93]

매번 감사합니다~
1빠~