2nd/01_Archive/2026-04-20/04_React-Performance_Optimization.md

⚡ [LEVEL 4] 렌더링 최적화: "내 앱은 왜 렉이 걸릴까?"

1. 렌더링은 공짜가 아니다

• 부모가 그려지면 자식도 그려진다. 이게 계속되면 성능 폭발이다.
• React.memo: "너 아까랑 준 거 똑같은데? 다시 그리지 마!"
• useMemo: 복잡한 계산 결과물 재사용.
• useCallback: 함수 재생성 방지.

2. '성급한 최적화'는 독이다

• 모든 컴포넌트에 memo를 바르는 건 멍청한 짓이다.
• 진짜 느린 부분(리스트 1000개 로딩 등)을 찾아서 **프로파일러(DevTools)**로 찍어보고 최적화하라.

3. Key값의 중요성: index는 최후의 수단이다

• map 돌릴 때 index를 key로 쓰면, 리스트 순서가 바뀔 때 리액트가 멘붕에 빠진다.
• 반드시 데이터의 Unique ID를 써라. 그래야 리액트가 "아, 순서만 바뀌었네?" 하고 영리하게 대처한다.