TIL/React
[240320] 리액트의 렌더링, 렌더링 최적화, 메모이제이션
성능 최적화를 위해 리렌더링을 줄이자! 라고 하면서, 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..
