1. React.memo(컴포넌트 메모화)

컴포넌트를 메모이제이션하여, props가 변경되지 않으면 리렌더링을 방지한다.

const Child = React.memo(({ value }: { value: number }) => {
  console.log('렌더링됨');
  return <div>{value}</div>;
});

• 부모 컴포넌트가 자주 리렌더링되지만 자식의 props가 바뀌지 않는 경우.

• 비용이 큰 UI 렌더링 컴포넌트에서 사용( 나의 경우는 ReactQuill에 적용한 적 있음.)

• 얕은 복사로 props가 배열이나 객체인 경우에는 변경 되지 않음.

2. useCallback

function자체를 메모이제이션.

const handleClick = useCallback(() => {
  console.log('클릭!');
}, []);
<Button onClick={handleClick} />

• handleClick이 리렌더링마다 새로 만들어지지 않고 같은 참조를 유지한다.

• React.memo로 감싼 자식 컴포넌트에 함수를 props로 전달할 때 사용.

• 콜백을 dependency로 쓰는 useEffect 등에서 불필요한 재실행 방지.

3. useMemo

값(Value)을 메모이제이션.

const expensiveValue = useMemo(() => {
  return heavyCalculation(data); // 비용이 큰 계산
}, [data]);

• 비용이 큰 계산(정렬, 필터링 등)**을 매 렌더마다 다시 하지 않게 하고 싶을 때 사용

• props로 전달되는 객체/배열을 새로 생성하지 않고 유지하고 싶을 때 사용.

React.memo → 컴포넌트 자체를 메모 (props 변하지 않으면 리렌더링 방지).

4. 상태 관리 최소화

상태관리 최소화란 정말 필요한 곳에만 State를 두고 나머지는 계산된 값 으로 처리하는 방법

1. State를 실제로 사용하는 하위 컴포넌트로 내려서(localize) 리렌더링 범위를 줄인다.

2. 기존 props나 state로 계산 가능한 값은 state로 두지 않는다.

3. Context의 남용 방지

4. 컴포넌트 분리 + memoization

상태관리 초소화는 State를 정말 필요한 컴포넌트에만 두고, 파생 값은 계산으로 처리하며, 전역 상태를 최소화 하는 것을 의미합니다. 이는 리렌더링 범위를 줄이고 성능을 최적화 할 수 있습니다.

5. Virtualization (가상 스크롤)

가상 스크롤이란 - 모든 리스트 아이템을 한 번에 DOM에 렌더링하지 않고, 화면(Viewport)에 보이는 영역만 DOM에 렌더링하는 기술. - 스크롤이 이동할 때 보이지 않는 영역의 DOM은 제거하고, 새로 보이는 부분만 렌더링한다. - 대표 라이브러리: react-window, react-virtualized. - 예시 : MUI DataGrid

• 아이템 높이가 유동적이면 성능이 떨어질 수 있어 → 보통 고정 높이를 권장.

• 무한 스크롤(infinite scroll)과 같이 사용할 때는 Intersection Observer를 조합.

• 너무 많은 상태나 복잡한 컴포넌트를 넣으면 렌더링 부하가 발생할 수 있어 → React.memo와 함께 최적화 필요.

가상 스크롤은 대량의 데이터를 표시할 때 화면에 보이는 부분만 DOM으로 렌더링하는 최적화 기법입니다. 단 대용량의 데이터를 불러오는 것 자체도 속도 지연이 발생할 수 있기에 Api페이지네이션 처리를 하면 더욱 효율적입니다.

6. key 관리 & 재조정(Reconciliation)

재조정(Reconciliation) 이란 React에서 State나 Props가 변경되면 새롭게 생긴 VirtualDOM과 이전 VirtualDOM을 비교하여 변경된 부분만 실제 DOM에 반영하는 비교 & 반영 과정을 뜻 한다.

Key 란 동일한 컴포넌트를 반복적으로 랜더링 할때 각 요소를 구분하기 위한 유일한 식별자다. key를 올바르게 선언하지 않으면 React는 요소를 index 기반으로 추적하게 되어, 중간 요소가 추가/ 삭제 되면 불필요한 리렌더링이 일이어난다. 인덱스를 key로 쓰면 요소 순서가 바뀌는 순간 React가 요소를 잘못 인식해 불필요한 리렌더링과 상태 초기화 문제가 발생할 수 있다. 그래서 고유 ID를 key로 사용하는 게 안전하다.

1. React는 동일한 key를 가진 요소끼리 비교해서, 변경 여부를 확인한다.

2. key가 다르면 기존 DOM을 제거하고 새로 생성한다.

3. key가 같으면 기존 DOM을 재사용하고 속성(props)만 업데이트한다.

7. Lazy Loading 와 Code Splitting

Lazy Loading(지연로딩)은 필요한 시점에만 리소스를 로드하는 기법으로 초기 페이지 로딩 시 모든 js파일을 하번에 불러오는 대신, 사용자가 특정 기능을 요청할 때 해당 기능의 js 번들을 불러오는 방식이다.

import React, { lazy, Suspense } from "react";

const MyComponent = lazy(() => import("./MyComponent"));
function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <MyComponent />
    </Suspense>
  );
}

• 초기 로딩 속도 개선 (필요 없는 컴포넌트는 나중에 로딩).

• 사용자가 방문하지 않는 페이지는 JS 로딩을 아예 안 함.

Code Splitting (코드 분할)은 js 번들을 여러 개의 작은 청크로 나눠서 필요할 때만 로드하는 기법이다. vite와 같은 빌드 도구에서 import를 만나면 자동으로 코드 스플리팅을 한다.

//import() 덕분에 MyComponent 관련 코드가 별도 JS 청크로 분리됨..
const MyComponent = lazy(() => import('./MyComponent'));

• Code Splitting: 코드를 "쪼개는" 빌드 단계 개념. (번들 최적화)

• Lazy Loading: 쪼갠 코드를 필요할 때 로드하는 실행 단계 개념.

SPA의 초기 로딩 성능을 개선하기 위해 Code Splitting으로 JS 번들을 나누고, Lazy Loading으로 실제 필요한 시점에 해당 번들을 불러와 렌더링합니다. React에서는 React.lazy와 Suspense가 대표적인 구현 방식이다."

///about 페이지를 들어가야 About 컴포넌트를 네트워크에서 가져온다.
const About = lazy(() => import("./pages/About"));

<Routes>
  <Route path="/about" element={<About />} />
</Routes>

8. 브라우저 API 최적화

브라우저 API란 웹 브라우저가 제공하는 기능을 조작할 수 있는 인터페이스(함수/객체) 집합으로 자바스크립트 자체에는 없는 기능인데, 브라우저가 JS 엔진(V8 등) 위에서 동작하면서 제공해주는 추가 기능.

• document.querySelector() : DOM을 조작하기 위한 API

• localStorage.setItem() : 브라우저 로컬 스토리지에 값을 저장하기위한 함수

• fetch() : HTTP 파이프라인을 구성하는 요청과 응답 등의 요소를 조작하는 함수.

• addEventListener() : 브라우저에서 발생하는 이밴트를 등록하기 위한 함수.

브라우저 API는 JavaScript의 내장 함수(Built-in Object)가 아니라, 브라우저가 JS 엔진 위에서 웹을 제어할 수 있도록 제공하는 추가 기능이다.

브라우저 API 최적화와 React 렌더링 최적화는 리렌더링은 최소화 + 브라우저 작업 부하도 최소화”라는 공통 목표를 갖고 있다.