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