React · 22 측정한 경로만 메모하기
단계: 성능 검증과 통합 편집기 · 편집 가능한 예제 · 저장 ID: react-step-22
목표와 학습 후 역량
- 동일 입력 10회의 전후 기록이 있다.
- 토글과 삭제 기능이 메모 적용 뒤에도 일치한다.
선수 지식
22단위는 21단위 결과물과 실험 기록을 이어 사용합니다.
핵심 개념과 설명
memo
memo는 props가 같을 때 자식 렌더를 건너뛸 수 있게 합니다. 매번 새 객체나 함수를 전달하면 비교 결과가 달라질 수 있습니다.
캐시 비용
useMemo와 useCallback도 의존성 관리와 저장 비용이 있습니다. 성능 최적화 여부는 동일 조건 측정으로 판단합니다.
실습 준비
예제 화면의 실행 범위 안내를 먼저 확인하세요. 다음은 과제를 별도 프로젝트로 확장할 때의 준비 환경입니다. 별도 React Vite 프로젝트의 JSX 실습입니다. Node와 패키지 버전·lockfile을 기록하고 프로젝트 개발 서버에서 실행하세요. 내장 편집기는 범용 JSX 컴파일러가 아닙니다.
연결된 예제는 출발점입니다. 아래 과제 전체가 완성된 코드는 아니며, 예제의 지원 범위를 넘는 작업은 별도 프로젝트에서 수행하세요.
실습 과제
- src/CardRow.jsx의 병목 후보에 memo를 적용하세요.
- 필요한 props만 전달하고 이벤트 함수의 정체성을 확인하세요.
- 21단위 입력을 반복해 전후 커밋·시간을 비교하고 효과가 없으면 이유를 적으세요.
관찰할 변수
| 변수 | 기준 조건 | 바꿀 조건 | 예상할 변화·검증 가설 |
|---|---|---|---|
| memo | 미적용 | 적용 | props가 같은 카드의 추가 렌더가 감소할 수 있다. |
표의 예상은 측정 결과가 아닙니다. 한 번에 한 조건만 바꾸고 실제 결과가 다르면 원인을 기록하세요.
완료 조건
- 동일 입력 10회의 전후 기록이 있다.
- 토글과 삭제 기능이 메모 적용 뒤에도 일치한다.
자가 점검
- 안정된 props가 없으면 memo가 왜 효과가 적나요?
- useMemo를 정확성 보장 장치로 쓰면 왜 위험한가요?
공식 참고
연결된 예제와 실행 범위
실제 React API 실험입니다. JSX 대신 createElement를 사용합니다.
원본 코드·기록은 자동으로 덮어쓰지 않습니다. 기존 예제를 초기화할 때도 필기는 유지됩니다.
다음 학습
이전: Profiler로 병목 찾기 · 다음: 긴 목록의 표시 범위