React에서 자주 쓰는 성능 패턴

리렌더를 이해하기

상태가 바뀌면 해당 컴포넌트와 자식들이 다시 그려질 수 있습니다. 무거운 자식 트리가 매번 갱신되지 않도록 경계를 나누는 것이 첫 단계입니다.

memo와 콜백

React.memo로 props가 같을 때 그리기를 건너뛸 수 있고, 자식에게 함수를 넘길 때는 useCallback으로 참조를 안정화하는 패턴이 자주 쓰입니다. 남용하면 오히려 복잡해질 수 있으니 프로파일링으로 병목을 확인한 뒤 적용하는 것이 좋습니다.

리스트와 키

긴 목록에서는 가상 스크롤 라이브러리를 고려할 수 있습니다. 키는 목록 항목의 안정적인 식별자로 두어 DOM 재사용이 꼬이지 않게 합니다.

이미지와 폰트

Next.js의 Image 컴포넌트는 크기와 지연 로딩을 도와줍니다. 레이아웃 시프트를 줄이려면 width·height를 명시하는 습관을 들이세요.

정리

성능은 측정 없이 최적화하기 어렵습니다. React DevTools Profiler와 Web Vitals를 함께 보면서 우선순위를 정해 보세요.