개발하는데 다 이유가 있겠지

메모이제이션(Memoization)

---

리액트를 성능 최적화하는 방법에는 대표적으로 `메모이제이션`을 말할 수 있습니다.

리액트의 `memo`를 사용하여 컴포넌트를 메모이제이션 할 수 있습니다. 이는 컴포넌트의 props가 변경되지 않았을 때, 리렌더링을 방지하여 성능을 최적화 합니다. 특히, 렌더링 비용이 큰 컴포넌트에서 유용합니다.

import React, { memo } from 'react';

const MyExpensiveComponent = memo(({ data }) => {
  // 복잡한 연산이나 많은 DOM 조작이 필요한 컴포넌트
  console.log('Expensive component rendered');
  return (
    <div>
      {data.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
});

 

또한 `useCallback`이나 `useMemo`를 사용해 최적화 할 수 있습니다.

useCallback은 `함수`를 메모이제이션하여 불필요한 함수의 재성성을 방지합니다.

useMemo는 `값의 재계산`을 방지하여 성능을 최적화합니다.

의존성 배열에 포함된 값이 변경되면, useCallback이나 useMemo는 내부 로직을 다시 실행하여 새로운 값 또는 함수를 반환합니다.

불필요한 연산이나 함수를 생성하지 않아 자원을 효율적으로 관리할 수 있습니다.

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

function MyComponent() {
  const [count, setCount] = useState(0);

  const increment = useCallback(() => {
    setCount(count + 1);
  }, [count]); // count가 변경될 때만 함수를 새로 생성

  const calculatedValue = useMemo(() => {
    // 비싼 연산
    return expensiveCalculation(count);
  }, [count]); // count가 변경될 때만 값을 재계산

  return (
    <div>
      <button onClick={increment}>Increment</button>
      <p>Calculated value: {calculatedValue}</p>
    </div>
  );
}

 

코드 스플리팅(Code Spliting)

---

React의 코드 분할은 애플리케이션의 초기 로딩 속도를 향상시키고 번들 크기를 줄여 사용자 경험을 개선하는 효과적인 방법입니다.

`React.lazy`를 사용하여 컴포넌트를 동적으로 import하고, `Suspense`를 통해 로딩 중인 컴포넌트를 관리함으로써, 필요한 코드만 로드하여 메모리 사용량을 줄이고 성능을 최적화할 수 있습니다.

특히, SPA 환경에서 `라우트별로 코드를 분할`하면 각 페이지에 필요한 코드만 로드되어 사용자는 더 빠르게 페이지를 이용할 수 있습니다.