신뢰성과 렌더 비용

테스트는 동작 계약을 고정하고, 최적화는 측정된 병목만 줄인다

TypeScript React 프로젝트에서 테스트와 성능은 따로 움직이지 않는다. 타입 계약으로 입력 모양을 잠그고, 사용자 관점 테스트로 동작을 고정한 뒤, 측정된 렌더 비용만 좁게 바꾼다.

1 사용자 행동

화면에서 찾고 클릭하는 기준으로 기대 동작을 적는다.

2 컴포넌트 테스트

render, screen, waitFor로 로딩과 에러를 고정한다.

3 회귀 기준선

리팩터링 전후 같은 사용 결과가 나오는지 비교한다.

4 렌더 비용 측정

느린 목록, 잦은 부모 렌더, 비싼 계산을 분리한다.

5 좁은 최적화

memo, callback, memoized value, virtualization을 목적에 맞춘다.

6 다시 테스트

최적화가 동작 계약을 깨지 않았는지 같은 시나리오로 돌린다.

테스트 축

구현 내부보다 화면에서 보이는 계약을 검증한다

Testing Library 사용자 관점 쿼리
Mock API 로딩, 성공, 실패를 재현
TypeScript 잘못된 props를 작성 시점에 차단
성능 축

측정 없이 넣은 최적화는 복잡도만 늘릴 수 있다

React.memo props가 같으면 자식 렌더 생략
useCallback 핸들러 참조를 안정화
useMemo 비싼 계산 결과를 캐시