React · 20 전환과 지연된 결과
단계: 필기 보존과 렌더 측정 · 편집 가능한 예제 · 저장 ID: react-step-20
목표와 학습 후 역량
- 입력창에 마지막 문자열이 정확히 남는다.
- 지연 중임을 표시하고 최종 결과가 최신 입력과 일치한다.
선수 지식
20단위는 19단위 결과물과 실험 기록을 이어 사용합니다.
핵심 개념과 설명
긴급 입력
입력 문자열은 사용자가 즉시 확인할 값입니다. 비용 큰 결과 갱신과 같은 우선순위로 다룰 필요는 없습니다.
지연된 값
useDeferredValue는 이전 값을 잠시 보여 주며 새 결과 렌더를 준비합니다. 느린 자식을 memo로 감싸고 다른 props도 안정적으로 유지해야 긴급 입력 렌더에서 자식 작업을 건너뛸 수 있으며 debounce와는 다릅니다.
실습 준비
예제 화면의 실행 범위 안내를 먼저 확인하세요. 다음은 과제를 별도 프로젝트로 확장할 때의 준비 환경입니다. 별도 React Vite 프로젝트의 JSX 실습입니다. Node와 패키지 버전·lockfile을 기록하고 프로젝트 개발 서버에서 실행하세요. 내장 편집기는 범용 JSX 컴파일러가 아닙니다.
연결된 예제는 출발점입니다. 아래 과제 전체가 완성된 코드는 아니며, 예제의 지원 범위를 넘는 작업은 별도 프로젝트에서 수행하세요.
실습 과제
- src/LargeList.jsx에 5000개 제목 필터를 만들고 memo로 감싸세요. 목록 데이터와 이벤트 props의 참조를 안정적으로 유지하세요.
- 부모에서 useDeferredValue로 query를 지연하고 memo 경계 안의 LargeList에 deferredQuery를 전달하세요. 이 실습은 React Compiler 자동 메모이제이션을 가정하지 않습니다.
- CPU 지연 조건에서 memo 없는 대조군과 비교하세요. 입력 10회의 반응, 목록 렌더 로그, 지연 표시와 최종 검색 결과를 기록하세요.
관찰할 변수
| 변수 | 기준 조건 | 바꿀 조건 | 예상할 변화·검증 가설 |
|---|---|---|---|
| 목록 query | 즉시 값 | deferred 값 | 입력은 즉시 보이고 목록은 이전 결과를 잠시 유지할 수 있다. |
표의 예상은 측정 결과가 아닙니다. 한 번에 한 조건만 바꾸고 실제 결과가 다르면 원인을 기록하세요.
완료 조건
- 입력창에 마지막 문자열이 정확히 남는다.
- 지연 중임을 표시하고 최종 결과가 최신 입력과 일치한다.
자가 점검
- deferred 값이 네트워크 요청을 줄여 주나요?
- 입력 state 자체를 transition에 넣으면 어떤 문제가 있나요?
공식 참고
연결된 예제와 실행 범위
실제 React API 실험입니다. JSX 대신 createElement를 사용합니다.
원본 코드·기록은 자동으로 덮어쓰지 않습니다. 기존 예제를 초기화할 때도 필기는 유지됩니다.
다음 학습
이전: 비동기 상태를 명시하기 · 다음: Profiler로 병목 찾기