리액트의 동작원리함수(컴포넌트) → 객체(VDOM) → DOM 1. 함수(컴포넌트) → 객체(VDOM)리액트처럼 컴포넌트를 사용하기 위해서 반환된 JSX 를 가상 돔 JS 로 바꾸어보는 것부터 시작하자!JSX를 JS로 트랜스파일링?트랜스파일러: 바벨const App = () => { return ( hello );}ReactDOM.render(, document.getElementById("root"));import { jsx as _jsx } from "react/jsx-runtime";const App = () => { return _jsx("div", { children: _jsx("h1", { children: "hello" }) ..
성능 최적화를 위해 리렌더링을 줄이자! 라고 하면서, React.memo()나 useMemo()를 남발하고 있지는 않았나 되돌아보자. 리액트에서 "렌더링"이란 무엇인지 정확히 알고, 최적화를 어떻게 시킬 수 있는지 알아보자! 리액트의 렌더링이란? 아래 과정 중 Render phase를 리액트에서 렌더링이라고 부른다. Trigger phase 0️⃣ 최초 진입 시 0️⃣ state, 부모의 state 의 변경 각 컴포넌트에서 state의 변경 시 dirty check ➡️ batch 추가 Render phase 1️⃣ render() 호출 (클래스형 컴포넌트) 또는 함수 컴포넌트 호출 (함수형 컴포넌트) 2️⃣ 가상 DOM 재조정 이전 가상 DOM과 현재 가상 DOM을 비교 (Diffing Algorith..
1. 가상 돔(Virtual DOM) 이란? 웹페이지가 표시해야 할 DOM을 일단 메모리에 저장하고, 리액트가 실제 변경에 대한 준비가 완료됐을 때 실제 브라우저의 DOM에 적용 이러한 가상 돔은, 파이버(Fiber)라는 아키텍처로 구성되어 있다. 2. 리액트 파이버(React Fiber) 하나의 element에 파이버 하나가 생성되는 1:1 관계 파이버가 하는 일 작업을 작은 단위로 분할한 다음, 우선순위를 매긴다. 이러한 작업을 일시 중지하고 나중에 다시 시작할 수 있다. 이전에 했던 작업을 다시 재사용하거나 필요하지 않은 경우에는 폐기할 수 있다. ⏩️ 이러한 작업들이 모두 비동기로 일어난다. 파이버 구현체의 주요 속성 tag: element 1:1 매칭 정보 (리액트 컴포넌트, DOM노드, .....
