React 성능 최적화?

React는 기본적으로 빠른 UI를 제공하지만, 컴포넌트 수가 많아지고 복잡한 연산이 늘어날수록
불필요한 렌더링이나 초기 로딩 시간이 성능 저하를 일으킬 수 있다.

이럴 때 사용할 수 있는 주요 성능 최적화 기법들을 정리해보자!

1. React.memo – 컴포넌트 메모이제이션

props가 변경되지 않았다면 리렌더링을 막는 고차 컴포넌트(HOC)

import React from 'react';

const MyComponent = React.memo(function MyComponent({ text }) {
  console.log("렌더링!");
  return <div>{text}</div>;
});

memo를 사용하면 불필요한 렌더링을 막아주기 때문에 렌더링 비용이 큰 컴포넌트에서 특히 유용하다.

---

2. useCallback & useMemo - 함수와 값을 메모제이션

2-1. useCallback - 함수를 메모제이션

const handleClick = useCallback() => {
	console.log("클릭됨");
}, []);

• 의존성 배열이 변하지 않는 한, 같은 함수 인스턴스를 재사용
• 자식 컴포넌트에 함수를 props로 넘길 때 유용

---

2-2. useMemo - 계산된 값을 메모제이션

const result = useMemo(() =>{
	return heavyCalculation(a,b);
}, [a,b])

• 의존값이 변경되지 않는 한, 연산을 다시 수행하지 않는다.
• 비용이 큰 계산 작업에서 유용

---

예제: useCallback + memo 같이 사용

const Child = React.memo(({onClick}) => {
	console.log("Child 렌더링");
  	return <button onClick={onClick}>클릭</button>
});

function Parent() {
	const [count, setCount] = useState(0);
  
  	const handleClick = useCallback(() => {
    	console.log("Clicked")!
    }, []);
        
    return (
    	<>
        	<Child onClick={handleClick} />
        	<button onClick={() => setCount(count + 1)}>+1</button>
        </>
    )
}

---

3. 코드 스플리팅 (Code Splitting)

애플리케이션을 여러 개의 청크(조각)로 분할하여
필요한 시점에만 로딩 -> 초기 로딩 시간 단축!!

React에서 코드 스플리팅 도구

• React.lazy() - 동적으로 컴포넌트를 로드
• Suspense - 로딩 중 fallback UI 표시

---

예제

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

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

function App() {
	return (
    	<Suspense fallback={<div>로딩 중...</div>}>
        	<LazyComponent/>
        </Suspense>
    )
}

MyComponent는 실제로 화면에서 필요할 때 비동기적으로 로드된다.
-> 초기 렌더링에서는 불필요한 코드가 제외되므로 성능 향상!

---

코드 스플리팅이 필요한 상황

1. 초기 로딩 시간이 길어지는 경우

• 앱이 크고 복잡할수록 초기 JS 번들 크기가 커짐
• 사용자가 처음 보는 화면만 빠르게 로드되도록 분할하면 UX 개선

2. 라우트별 분할이 필요한 경우

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

• SPA 구조에서는 각 페이지 컴포넌트를 나눠서 필요할 때만 로딩
• 라우터와 함께 코드 스플리팅하면 자연스럽고 효율적

---

마무리

React의 성능 최적화는 단순히 렌더링을 줄이는 것을 넘어서
전체 앱의 구조, 사용자 경험까지 고려한 설계가 필요하다.

다음에는 고급 성능 전략도 이어서 정리해보도록 하자!