React 성능 최적화

1. 렌더링 최적화

1. 불필요한 렌더링 막기

만약 useState 의 변경으로 상태가 변경된다면, 상태에 관련있는 컴포넌트로 구성/분리한다.

다음 코드의 문제점은?

export default function App() {
  let [color, setColor] = useState('red');
  return (
    <div>
      <input value={color} onChange={(e) => setColor(e.target.value)} />
      <p style={{ color }}>Hello, world!</p>
      <ExpensiveTree />
    </div>
  );
}

[after]

export default function App() {
  return (
    <>
      <Form />
      <ExpensiveTree />
    </>
  );
}

function Form() {
  let [color, setColor] = useState('red');
  return (
    <>
      <input value={color} onChange={(e) => setColor(e.target.value)} />
      <p style={{ color }}>Hello, world!</p>
    </>
  );
}

참고 : https://overreacted.io/before-you-memo/

2. 참조타입 render밖에 선언하기

렌더링 역할을 하는 return 안에 참조가 되는 타입(함수, 객체, 배열) 을 직접 선언하지 않는다.

이렇게 되면 업데이트 될 때 값을 비교하는 코드가 있다면, 그 결과는 매번 다르다고 판단할 것이다. 따라서 다시 렌더링이 된다.

return (
 <>
  	<Title>{title is..}</Title>
	<ShowPost postClick={()=>{console.log('click handler')}} />
  </>
)

위코드의 postClick은 동일한 함수임에도 매번 생성되고 있다.
postClick의 인자로 들어가는 함수를 jsx 밖에 선언하고, 함수 캐시의 활용 기회를 만들자.

[개선안]

• 컴포넌트의 props나 state를 참조할 필요가 없다면, 아예 컴포넌트 함수 바깥으로 빼기
• 내부의 데이터가 필요하다면 useCallback 훅을 사용하여 함수를 메모이제이션

3. useCallback : 함수 캐시

함수를 props로 전달할때 매번 새로운 함수가 전달될 수 있다.
매번 새로운 함수를 생성할 필요는 없기 때문에 이를 재사용하도록 구현할 수 있음.

props로 함수를 전달받는 하위 컴포넌트는 새로운 props가 전달됐기 때문에 다시 렌더링 할 수 있다.

새로운 함수를 계속 생성하지 않고 기존 함수를 기억해서 사용하고, 이를 props로 전달하는 것이 React에서는 권장되는 방법이다.

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

 

여기서도 두번째 인자([a,b])가 함수 재사용을 할지에 대한 조건역할을 한다.
의존성배열을 설정하지 않으면 캐시되지 않음.

 

참고)

• 과연 모든 컴포넌트에 전달되는 함수를 캐시해야 할까? 🤔
• 캐시된 함수를 하위컴포넌트에 전달하면 하위 컴포넌트는 리렌더링이 안되나? (리액트 특징)

4. useEffect 매번 실행되지 않게 하기

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // Only re-run the effect if count changes

두 번째 인자는 아래 다른 Hook에서도 콜백함수의 실행에 대한 조건으로 활용된다.

=> useEffect, useMemo, useCallback

5. React.memo : 컴포넌트 렌더링 결과 재사용

불필요하게 자기 자신을 렌더링 하지 않게 하기.

아래 코드에서 ShowCountInfo에 전달되는 props값은 대부분 동일하다. ShowCountInfo 컴포넌트는 매번 동일한 렌더링 결과를 만들고 있는 것으로 보인다.

[App.jsx]

// [App.jsx]
const App = () => {
  // 1. 자식(ShowCountInfo)에게 전달될 데이터 (상태로 관리)
  const [posts] = useState([{ id: 1 }, { id: 2 }]); 
  const [pickedCount] = useState(1);

  // 2. 자식과는 상관없는 부모만의 상태 (예: 다크모드, 타이머, 입력창 등)
  const [typedText, setTypedText] = useState("");

  return (
    <div>
      {/* 텍스트를 입력할 때마다 App은 리렌더링되지만, 
          ShowCountInfo로 내려가는 posts, pickedCount는 변하지 않음 */}
      <input 
        value={typedText} 
        onChange={(e) => setTypedText(e.target.value)} 
        placeholder="자식과 상관없는 입력창"
      />
      
      <p>입력 중: {typedText}</p>

      {/* React.memo가 없다면, 글자 하나 칠 때마다 이 컴포넌트도 계속 다시 그려짐 */}
      <ShowCountInfo postCount={posts.length} pickedCount={pickedCount} />
    </div>
  );
};

개선 필요.
React.memo 메서드를 통해서 컴포넌트 렌더링 결과를 캐시하도록 할 수 있다.

[ShowCountInfoMemo.jsx]

const ShowCountInfo = ({postCount, pickedCount}) => {
    return (
        <div>
            <span>총 {postCount}의 post 중 {pickedCount}개가 선택됐습니다.</span>
        </div>
    )
}

const ShowCountInfoMemo = React.memo(ShowCountInfo);

참고) 조건상황을 통해서 re-rendering을 결정할 수 있음.

• false면 이전 props와 다음 props가 달라 re-rendenring

const PressItemMemo = React.memo(PressItem, (prev, next) => {
   return (prev.newsData === next.newsData)
})

6. React.memo, UseCallback을 활용한 시나리오.

먼저 props로 function을 전달하고 싶은경우에는, useCallack을 통해 한번 감싼 function을 전달한다.
전달받은 컴포넌트는 React.memo를 통해서 감싼다.
React.memo는 props가 동일하다면 다시 렌더링되지 않도록 한다.
따라서 useCallback을 통해서 동일한 props를 전달받았다면 컴포넌트가 다시 렌더링 되지 않고, 렌더링 결과를 재사용하게 된다

7. 실습

https://codesandbox.io/s/react-react-memo-usecallback-problem-mrrqn

1. Child 컴포넌트의 불필요한 Re-rendering 확인
2. Child 컴포넌트에 React.memo 적용
3. useCallback 을 사용해보기 (의존성 배열 필요, [])

8. useMemo : 연산 결과 캐시

아래 코드는 무엇이 문제인가?

import React, { useState, useMemo } from 'react';

const Child = ({ items }) => {
  const [count, setCount] = useState(0);

  const selectedItem = items.find((item) => {
    console.log('finding value');
    return item === 9;
  }); 

return (
    <>
        <h1>Count: {count} </h1>
        <button onClick={() => setCount(count + 1)}>Increment</button>
        <h1>selectedItem : {selectedItem}</h1>
    </>
    );
};

const App = () => {
    const items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    return <Child items={items}></Child>;    
};

export default App;

리렌더링시 불필요한 중복계산이 일어나지 않도록 dependency 설정을 해서 캐시를 하도록 할 수 있음.
즉, 반복적인 리액트 렌더링 과정에서, 동일한 계산이 일어나는 문제를 막을 수가 있음.

const selectedItem = useMemo(() => {
    return items.find((item) => {
        console.log('finding value');
        return item === 9;
    });
}, [items]);

9. profiling : 렌더링 최적화 확인

개발자도구-React의 Profiler 패널을 확인한다.

'profiling버튼'을 눌러서 렌더링과정을 녹화한다.

• 몇번 실제 렌더링(commit)이 발생했는지 살펴본다. 예상과 달리 많은 렌더링이 일어나고 있지 않는지 확인한다.
• 매번 렌더링이 발생할때마다 동일한 렌더링이 일어나는 것은 없는지 확인한다.
  • React.memo를 사용할때 같은 렌더링이 일어나지 않는 것도 확인할 수 있다.
• 특별히 오래 걸리는 컴포넌트 렌더링은 없는가? 병목이 되는 지점을 찾고 원인을 찾아본다.

Profiler 중에 불필요한 component tree가 많이 보인다면 설정버튼을 눌러서, 필터링을 할 수 있다. (Context, forwardRef 등을 제거해보자)

10. 서버컴포넌트

• 서버에서 처리 가능한 부분은 서버에서 처리하되, React 문법을 사용.
• 서버에서 처리한 코드는 클라이언트에 내려줄 필요가 없음 -> 번들링 사이즈 감소
• 비즈니스 로직이 많은 경우 서버컴포넌트 활용이 유리함

예시코드

// Server Component
import Expandable from './Expandable';

async function Notes() {
  const notes = await db.notes.getAll();
  return (
    <div>
      {notes.map(note => (
        <Expandable key={note.id}>
          <p note={note} />
        </Expandable>
      ))}
    </div>
  )
}

서버컴포넌트의 결과(RSC Payload) 는 아래의 형식으로 전송됨

---

2. React 기타 최적화

1. Code-splitting

React.lazy 를 활용한 dynamic import (ES Modules 스펙)

• TC39 stage 4( Finished )

React.lazy로 선언된 컴포넌트는 production build에서 별도 파일로 분리됨(code - splitting).

# 참고. React.suspense 와 함께 사용해야 함

• 비동기 요청이 오기 전 pending상태에서 효과적으로 fallback UI(loading~~)를 효과적으로 노출 할 수 있음.
• 렌더링 이후 fetch가 아닌, fetch와 동시에 렌더링이 가능한 기술
• 참고: https://react.dev/reference/react/Suspense

오리지날 코드

import './App.css';
import { NewsListCount } from './NewsList';
import { PressNameList } from './PressNameList';
import React, { Suspense } from 'react';
import { TestComponent } from './TestComponent.jsx';
import PressDetail from './PressDetail';

function App() {
    return (
        <div className="App">
            <TestComponent />
            <Suspense fallback="loading...">
                <h1> hello world </h1>
                <NewsListCount />
                <PressNameList />
                <PressDetail />
            </Suspense>
        </div>
    );
}

export default App;

code splitting 작업결과

import './App.css';
import { NewsListCount } from './NewsList';
import { PressNameList } from './PressNameList';
import React, { Suspense } from 'react';
import { TestComponent } from './TestComponent.jsx';

//lazy로 감싸주기
const PressDetailLazy = React.lazy(() => import('./PressDetail'));

function App() {
    return (
        <div className="App">
        <TestComponent />
        <Suspense fallback="loading...">
            <h1> hello world </h1>
            <NewsListCount />
            <PressNameList />
            <Suspense fallback="loading...">
            	<PressDetailLazy />
            </Suspense>
        </Suspense>
        </div>
    );
}

export default App;

code-splitting & on-demand lazy loading

import './App.css';
import { NewsListCount } from './NewsList';
import { PressNameList } from './PressNameList';
import React, { Suspense } from 'react';
import { useRecoilValue } from 'recoil';
import { currentDetailPressIDAtom } from './Store';
import {TestComponent} from './TestComponent.jsx';
const PressDetailLazy = React.lazy(() => import('./PressDetail'));

function App() {
    const currentPressId = useRecoilValue(currentDetailPressIDAtom);

    return (
        <div className="App">
            <TestComponent />
            <Suspense fallback="loading...">
                <h1>recoil fetch test</h1>
                <NewsListCount />
                <PressNameList />
                {currentPressId && (
            	    <Suspense fallback="loading...">
            	        <PressDetailLazy />
            	    </Suspense>
                )}
            </Suspense>
        </div>
    );
}

export default App;

react-router 에서의 lazy-loading

function App() {
    const [bNewFormView, toggleNewFormView] = useState(false);

    const MileStoneViewLazy = React.lazy(() => import('./views/MileStoneView/MileStoneView'));
    const GNBLazy = React.lazy(() => import('./views/GNB.js'));

    return (
        <Router>
            <Main>
                <GlobalStyle />
                <Suspense fallback={<div>Loading...GNB</div>}>
                    <GNBLazy {...{ toggleNewFormView }} />
                </Suspense>
              
                <Route path="/labels">
                    <Content
                        bNewFormView={bNewFormView}
                        toggleNewFormView={toggleNewFormView}
                    ></Content>
                </Route>

                <Route path="/milestone">
                    <Suspense fallback={<div>Loading...GNB</div>}>
                        <MileStoneViewLazy></MileStoneViewLazy>
                    </Suspense>
                </Route>
            </Main>
        </Router>
    );
}

2. 데이터 페칭과 Next.js에서의 Suspense

Next.js(App Router)에서의 Suspense를 잘 사용함.
서버에서 데이터를 가져오는 동안 HTML을 조각내어 먼저 보내주는 '스트리밍(Streaming)'을 위해 사용.

2.1 loading.js : 페이지 단위의 자동 로딩
특정 경로 폴더에 loading.js를 만들면, Next.js는 파일 시스템을 인식하여 해당 경로의 layout.js와 page.js 사이에 자동으로 Suspense 경계를 생성한다.

app/
 └─ dashboard/
     ├─ loading.js 
     └─ page.js    

Next.js가 내부적으로 렌더링하는 코드:

<Layout>
  <Suspense fallback={<Loading />}>
    <Page />
  </Suspense>
</Layout>

2.2 수동 Suspense : 컴포넌트 단위의 세밀한 제어
Suspense는 페이지 내의 특정 부분들을 각기 다른 타이밍에 로딩하고 싶을 때 사용

//(Server Component)
import { Suspense } from 'react';
import { PostList, PostListSkeleton } from './PostList';

export default function Page() {
  return (
    <section>
      <h1>나의 블로그</h1>
      {/* 텍스트는 즉시 노출되고, 아래 PostList만 데이터 준비 시점에 노출 */}
      <Suspense fallback={<PostListSkeleton />}>
        <PostList /> 
      </Suspense>
    </section>
  );
}

3. React new features

1. useTransition 훅

• 상태 업데이트를 낮은 우선순위로 처리하여 UI가 끊기지 않도록 최적화
• 사용자 인터페이스는 즉시 반응하고, 상태 업데이트는 배경에서 진행됨
• 부드러운 UX를 유지할 수 있음 (Interruptible)

function SimpleTransitionExample() {
  const [count, setCount] = useState(0);
  const [isPending, startTransition] = useTransition();

  const increment = () => {
    startTransition(() => {
      setCount(prev => prev + 1);
    });
  };
  .....

• useTransition의 핵심 개념
  • 전환은 중단 가능함 (Interruptible)
    → 이전 상태 변경이 끝나지 않아도, 새로운 입력이 들어오면 즉시 반응 가능
  • 불필요한 로딩 인디케이터 방지
    → 화면 전체를 덮는 스피너 없이, 이전 상태를 유지하면서 업데이트가 필요한 시점에 UI를 전환
  • 대기 중인 작업이 완료된 후 최종 UI 표시
    → 비동기 작업이 끝날 때까지 불완전한 상태를 보여주지 않음
• 언제 사용하지?
  • 다른 UX에게 양보하고 싶을때.
  • 불필요한 loading indicator 를 노출하지 않고, 이전 상태를 유지하면서 다음 상태 전환을 하려고 할때.
    • 전환과정은 useTransition에서 제공하는 상태값(pending)으로 확인 가능.
• 예) https://react.dev/reference/react/useTransition#preventing-unwanted-loading-indicators

2. useDeferredValue 훅

• 특정 상태의 업데이트를 지연시켜서 자식 컴포넌트에 전달.
• 렌더링 자체를 지연시키는 게 아니라 상태 값 전달을 늦춰서 리렌더 타이밍을 미룸.
• 이로 인해 고빈도 상태 업데이트가 UI 렌더링에 미치는 영향을 줄임.
  • 실시간은 아니고 한 템포 느리게 동작함.
  • 그동안 자식은 이전 결과를 계속 보여줌.
  • 최종 상태만 반영되므로 중간 업데이트를 건너뛸 수 있어 성능에 유리함.
  • 렌더링 자체를 지연시키는 게 아니라 상태 값 전달을 늦춰서 리렌더 타이밍을 미룸.

  const [input, setInput] = useState('');
  const deferredInput = useDeferredValue(input);

  return (
    <div>
      <input type="text" value={input} onChange={(e) => setInput(e.target.value)} />
      <div>지연된 입력값: {deferredInput}</div>
      ....

• 언제 사용하지?
  • 빈번한 업데이트가 많아서 UX에 방해가 될때. 렌더링을 아예 지연시켜 버린다.
  • 이런점에서 transition 보다 더 성능상 유리하게 동작할 수 있음.
  • 예)
    https://react.dev/reference/react/useDeferredValue

3. React Compiler (React 19 +)

• 리액트 컴파일러는 코드의 최적화를 자동으로 처리하여 성능을 향상
• 예) 불필요한 메모리를 제거하거나 캐시를 효율적으로 관리하여 렌더링 성능을 개선
  -관련 API : useMemo, useCallback, React.memo

4. 자동배칭 개선

• 여러 상태 업데이트를 하나의 리렌더링으로 묶어 처리하여 성능 최적화.
• React 18 이전: React 이벤트 핸들러 내부에서는 자동 배칭이 적용되었으나, setTimeout, Promise, 네이티브 이벤트 핸들러 내부에서는 적용되지 않았음.
• React 18부터: setTimeout, Promise, 네이티브 이벤트 핸들러에서도 자동 배칭이 적용됨.

5. 서버 컴포넌트

• 서버에서 렌더링되어 클라이언트로 전달되는 컴포넌트로, 초기 로딩 속도 향상과 번들 크기 감소에 도움을 줌

// 서버에서 동작하는 컴포넌트 
export default async function ServerComponent() {
  const data = await fetchDataFromDatabase(); //DB연동함수
  return (
    <div>
      <h1>서버에서 가져온 데이터:</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

6. 서버 액션(Server Action)

• 서버에서 실행되는 비동기 함수로, 클라이언트에서 호출하여 서버 측 로직을 실행.
• 폼 처리, 상태 업데이트, 데이터 저장 등에 사용됨.
• 'use server' 지시어를 포함하여 정의.
• 서버액션(서버에서 동작하는 함수)

// Server Action
export async function handleFormSubmission(formData) {
  'use server';
  const name = formData.get('name');
  await saveToDatabase(name); // 서버에서 직접 데이터 저장
}

• 서버 액션을 호출하는 클라이언트 컴포넌트

'use client';
//서버함수를 가져와서 연동한다
import { handleFormSubmission } from './serverActions';

export default function ClientComponent() {
  return (
    <form action={handleFormSubmission}>
      <input type="text" name="name" placeholder="이름 입력" />
      <button type="submit">제출</button>
    </form>
  );
}

서버액션은 useActionState 훅과함께 사용하여, 로딩/에러 상태를 쉽게 관리할 수 있음.