rexondex's blog

리액트의 가상 DOM(Virtual DOM)에 대한 핵심 개념을 리액트 레퍼런스 문서 링크와 함께 3가지로 정리해보았습니다. 1.성능 향상 ■ 요소 비교하기 (Reconciliation)리액트의 "조정(reconciliation)" 과정은 가상 DOM의 변경 사항을 비교하는 Diffing 알고리즘을 사용하여 실제 DOM에 최소한의 변경 사항만 적용하는 핵심 과정입니다.이 과정에서 리액트는 변경된 부분만 효율적으로 업데이트하여 성능을 향상시킵니다.- https://ko.legacy.reactjs.org/docs/reconciliation.html또한, 리액트 18이후 동시성 렌더링 도입으로 인해서 렌더링의 과정이 많이 변경되었으므로 참고할 수 있습니다.- https://react.dev/blog/2022/..

리액트 렌더링 과정 순서에 따라 간단한 설명을 공식 문서와 함께 덧붙였습니다.총 1~8 단계로 정리했습니다. 1. 컴포넌트와 JSX ■ 컴포넌트 : 레고 블록처럼 UI를 구성하는 작은 단위입니다. 재사용 가능한 코드로, 웹 페이지의 특정 부분을 담당합니다. (예: 버튼, 입력창, 메뉴 등)- https://react.dev/reference/react/Component ■ JSX : HTML처럼 생긴 문법으로, JavaScript 코드 안에서 UI를 쉽게 작성할 수 있게 도와줍니다. 브라우저는 JSX를 이해하지 못하므로, JavaScript 코드로 변환해야 합니다.- https://react.dev/learn/writing-markup-with-jsx ■ React.createElement() : JSX..