# ⚡ [LEVEL 4] 렌더링 최적화: "내 앱은 왜 렉이 걸릴까?" ## 1. 렌더링은 공짜가 아니다 - 부모가 그려지면 자식도 그려진다. 이게 계속되면 성능 폭발이다. - `React.memo`: "너 아까랑 준 거 똑같은데? 다시 그리지 마!" - `useMemo`: 복잡한 계산 결과물 재사용. - `useCallback`: 함수 재생성 방지. ## 2. '성급한 최적화'는 독이다 - 모든 컴포넌트에 `memo`를 바르는 건 멍청한 짓이다. - 진짜 느린 부분(리스트 1000개 로딩 등)을 찾아서 **프로파일러(DevTools)**로 찍어보고 최적화하라. ## 3. Key값의 중요성: `index`는 최후의 수단이다 - `map` 돌릴 때 `index`를 key로 쓰면, 리스트 순서가 바뀔 때 리액트가 멘붕에 빠진다. - 반드시 데이터의 **Unique ID**를 써라. 그래야 리액트가 "아, 순서만 바뀌었네?" 하고 영리하게 대처한다.