리스트가 길어질수록 모든 항목을 한 번에 렌더링하면 성능 문제가 발생한다.특히 1,000개 이상의 데이터를 렌더링할 때 브라우저가 느려지고 사용자 경험이 저하된다.이를 해결하는 기술이 Virtual Scroll(가상 스크롤)이다. 🔎 가상 스크롤(Virtual Scroll)이란?가상 스크롤(Virtual Scroll)은 긴 리스트나 테이블에서 화면에 보이는 항목만 렌더링하고 나머지 항목은 렌더링하지 않는 기법이다.사용자가 스크롤할 때마다 보여줄 항목만 동적으로 추가한다.렌더링 비용과 메모리 사용량을 크게 줄일 수 있다.항목 수가 많아도 초기 렌더링 속도를 빠르게 유지하고 스크롤 성능을 높이는 것이다.💡 예: 카카오톡, 인스타그램, 유튜브 피드 → 수천~수만 개 항목이 있지만 느려지지 않는다. 🧩 ..

부모와 자식 컴포넌트 간의 렌더링 최적화와 계산 최적화가 어떻게 작동하는지 실험해보려고 한다.부모 컴포넌트가 리렌더링될 때 자식 컴포넌트가 리렌더링 되는지 확인하고 useMemo와 React.memo가 각각 최적화에 어떻게 작동하는지 알아보자. 🧩 예제 코드ParentWithMemoinput과 count 상태를 관리input 값으로 무거운 계산 실행계산 결과(calculatedValue)를 자식 컴포넌트에 넘긴다import { useMemo, useState } from 'react';import MemoizedChild from './MemoizedChild';const heavyCalculation = (num: number) => { console.log('💥 무거운 계산 실행'); let ..

컴포넌트에서 자식에게 함수를 props로 넘길 때, 그 함수가 일반 함수인지 useCallback으로 감싼 함수인지에 따라 자식 컴포넌트의 렌더링 여부가 달라진다. 🎯 실험 목표 부모 컴포넌트에서 자식에게 함수를 전달할 때, 일반 함수를 전달했을 때와 useCallback으로 메모이제이션한 함수를 전달했을 때를 비교하고자 예제 코드를 준비했다.어떤 경우에 자식 컴포넌트가 불필요하게 렌더링되는지 확인해 보자. 🧩 예제 코드ChildRaw: 일반 함수를 props로 받는 자식ChildMemo: useCallback 함수를 props로 받는 자식 👉 두 자식 모두 React.memo로 감싸져 있음import { memo, useCallback, useState } from 'react';const Chi..