렌더링 (2) 썸네일형 리스트형 🏄♀️ 리심스 3주차 - 리액트 렌더링 최적화 리액트는 성능 최적화를 위한 다양한 기능과 도구를 제공한다. 성능 최적화는 곧 불필요한 렌더링을 최소화하는 것으로, 이번 아티클에서는 렌더링 횟수를 줄이고 불필요한 메모리 사용을 줄이는 것에 초점을 맞추어 어떻게 애플리케이션의 성능을 높일 수 있는지 알아볼 것이다. 시작 전에, 먼저 리액트에서 리렌더링이 일어나는 조건은 아래와 같다.해당 컴포넌트의 state가 변경될 때해당 컴포넌트가 받는 props의 값이 변경되었을 때해당 컴포넌트의 부모 컴포넌트가 리렌더링되었을 때 1. Automatic batching (setState의 비동기 동작)💡 batching이란?React가 더 나은 성능을 위해 여러 개의 state 업데이트를 하나의 리렌더링 (re-render)로 묶는 것React 개발자는 성능 최.. 🏄♀️ 리심스 2주차 - 리액트 렌더링 리액트의 렌더링 프로세스리액트의 렌더링은 브라우저에 필요한 DOM 트리를 만드는 과정을 의미한다. 리엑트는 이 렌더링 작업을 위한 자체적인 렌더링 프로세스가 있다.1. 렌더링 트리거컴포넌트의 렌더링이 일어나는 이유1. 초기렌더링 - createRoot의 실행- 대상 DOM 노드와 함께 createRoot를 호출한 다음 해당 컴포넌트로 render 메소드 호출 2. 리렌더링 - 상태 업데이트- 렌더링된 이후 set함수를 통해 state를 변화시켜 추가적인 렌더링을 유발- props가 변경되는 경우- 컴포넌트의 Key props가 변경되는 경우컴포넌트의 상태를 업데이트하면 자동으로 렌더링 대기열에 추가state update -> triggers -> render 2. Render와 Commit (Rende.. 이전 1 다음
