React 테스트와 렌더링 최적화 기준

행동 기준 작성

컴포넌트 내부 state보다 사용자가 보는 텍스트, 버튼, 로딩 상태를 검증한다.

사용자 계약

API 응답 뒤 UI 변화는 findBy, waitFor로 실제 화면 전환을 기다린다.

async UI

Profiler로 불필요한 commit과 비싼 계산을 확인한 뒤 원인을 좁힌다.

근거

memo, useMemo, useCallback은 props 안정성과 계산 비용이 확인된 위치에만 둔다.

targeted memo

RTL

구현 세부보다 접근 가능한 역할과 이름으로 찾는다. 리팩터링해도 사용자 행동이 같으면 테스트가 유지된다.

role-first query

memo

부모가 매번 새 객체를 넘기면 memo 효과가 사라진다. 참조 안정성이 필요한 prop을 먼저 정리한다.

stable props

회귀

최적화 뒤 테스트가 통과해도 UX 지연이 늘 수 있다. 테스트와 프로파일링 수치를 같이 남긴다.

quality pair

사용자 언어 테스트 이름이 기능 요구사항처럼 읽힌다.

불안정 대기 setTimeout 기반 대기 대신 화면 변화 조건을 기다린다.

측정 기록 최적화 PR에는 렌더 횟수나 commit time 전후가 있다.

expect(screen.getByRole("button", { name: "저장" })).toBeEnabled()
// Profiler: commit time before/after 기록