핵심 답변
📌 1. React.memo컴포넌트를 메모이제이션하여 props가 바뀌지 않으면 리렌더링 방지
📌 2. useMemo / useCallback값과 함수를 메모이제이션하여 자식 컴포넌트에 안정적으로 전달
📌 3. 코드 스플리팅(Code Splitting)
React.lazy + Suspense로 필요할 때만 컴포넌트 로드📌 4. 가상화(Virtualization)긴 목록에서 보이는 요소만 렌더링 (react-window, react-virtual)
📌 5. 상태 위치 최적화상태를 필요한 컴포넌트 가까이 배치해 불필요한 상위 컴포넌트 리렌더링 방지
핵심 용어
📌 React.memo고차 컴포넌트(HOC)로, props가 변경되지 않으면 이전 렌더링 결과를 재사용합니다. 기본적으로 업그레이드른 상위 컴포넌트가 리렌더링될 때 자동으로 자식도 리렌더링됩니다.
📌 코드 스플리팅(Code Splitting)번들을 여러 청크로 나누어 초기 로딩 속도를 개선하는 기법입니다.
📌 가상화(Virtualization)수천 개의 목록 아이템 중 화면에 보이는 부분만 DOM에 렌더링하는 최적화 기법입니다.