리액트 성능 최적화 방법

 

리액트에서 성능 최적화를 위해 적용할 수 있는 방법 

컴포넌트 렌더링 최적화

React.memo를 사용한 컴포넌트 메모이제이션

• React.memo는 함수형 컴포넌트를 메모이제이션하여 불필요한 렌더링을 방지한다.
• 사용 예시:

const MyComponent = React.memo((props) => {
  return <div>{props.value}</div>;
});

• 렌더링 비용이 큰 컴포넌트나, 부모 컴포넌트의 재렌더링이 자식 컴포넌트의 렌더링을 불필요하게 유발할 때 사용된다.

useCallback으로 함수 메모이제이션

• useCallback은 동일한 함수를 재사용하여 자식 컴포넌트가 불필요하게 렌더링되지 않도록 한다.
• 사용 예시:

const handleClick = useCallback(() => {
  console.log('Button clicked');
}, []);

• 함수가 자식 컴포넌트에 props로 전달될 때 사용된다.

useMemo로 계산 결과 메모이제이션

• useMemo는 계산 비용이 높은 연산 결과를 메모이제이션하여, 필요할 때만 재계산한다.
• 사용 예시:

const expensiveCalculation = useMemo(() => {
  return someHeavyComputation(inputValue);
}, [inputValue]);

• 연산이 복잡하거나 빈번히 호출될 때 사용된다.

---

상태 관리 최적화

상태의 지역화

• 상위 컴포넌트에 모든 상태를 두기보다는, 하위 컴포넌트에서 개별적으로 관리할 수 있게 제한하여 렌더링 범위를 줄인다.

불변성 유지

• 상태를 직접 수정하지 않고 새 객체를 반환하여 변경사항을 관리한다.

const newArray = [...oldArray, newItem];

 

배치 업데이트

• React 18 이후로 배치 업데이트가 기본 동작이지만, flushSync를 활용하여 필요한 경우 동기화 업데이트를 사용할 수도 있다고 한다.

---

렌더링 제어

키 속성을 활용한 리스트 렌더링

• 리스트를 렌더링할 때 고유한 key를 사용하여 React가 변경된 항목만 업데이트하도록 한다.

// 잘못된 예시
{items.map((item, index) => <div key={index}>{item.name}</div>)}

// 올바른 예시
{items.map((item) => <div key={item.id}>{item.name}</div>)}

 

불필요한 렌더링 방지

• shouldcomponentupdate (클래스형 컴포넌트) 또는 React.memo를 사용하여 렌더링 조건을 제어할 수 있다.

---

코드 스플리팅

초기 로드 시간 단축

• React의 React.lazy와 Suspense를 사용하여 필요한 컴포넌트만 동적으로 로드한다.
• 사용 예시:

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

 

라우트별 코드 분리

• React Router와 함께 사용하여 페이지별로 필요한 코드만 로드한다.
• 예시:

const Home = React.lazy(() => import('./Home'));
const About = React.lazy(() => import('./About'));

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

 

---

이미지 및 리소스 최적화

이미지 최적화

• ebP, AVIF 같은 최신 포맷 사용
• 적절한 크기로 이미지 리사이징
• react-lazyload 라이브러리로 이미지 지연 로드
•  

정적 리소스 캐싱

• 브라우저 캐싱 및 CDN(Content Delivery Network)을 활용

---

기타 성능 최적화 기법

이벤트 핸들러 최적화

• 이벤트 핸들러를 필요한 요소에만 적용하고, 이벤트 위임을 활용할 수 있다.

브라우저 최적화

• requestAnimationFrame과 debounce, throttle을 사용하여 스크롤 및 입력 이벤트를 최적화할 수 있다.

렌더링 우선순위 설정

• React 18의 useTransition을 사용하여 낮은 우선순위 작업을 비동기로 처리할 수 있다.

const [isPending, startTransition] = useTransition();

const handleClick = () => {
  startTransition(() => {
    setState(expensiveComputation());
  });
};