본문으로 건너뛰기

초안: 검색 매개변수 성능 최적화

최종 위치: docs/router/framework/react/how-to/optimize-search-param-performance.md
프로그레시브 시리즈 위치: 고급 수준(파워 유저 패턴) - 가이드 #7
종속 항목: setup-basic-search-params.md, navigate-with-search-params.md
상태: 구현 준비 완료 - 성능 패턴을 사용할 수 있습니다.

navigate-with-search-params.md에서 준비한 콘텐츠​

함수형 업데이트의 성능 문제​

문제: 복잡한 함수형 업데이트로 불필요한 재렌더링이 발생합니다.

// ❌ Wrong - complex computation in render
<Link search={(prev) => {
  // Expensive computation on every render
  const result = expensiveCalculation(prev)
  return { ...prev, computed: result }
}}>
  Update
</Link>

// ✅ Correct - memoize or use callback
const updateSearch = useCallback((prev) => {
  const result = expensiveCalculation(prev)
  return { ...prev, computed: result }
}, [])

<Link search={updateSearch}>Update</Link>

문제: 컴포넌트 렌더링 중 navigate를 호출하면 무한 루프가 발생합니다.

function ProblematicComponent() {
  const navigate = useNavigate()

  // ❌ Wrong - navigate during render
  if (someCondition) {
    navigate({ search: { redirect: true } })
  }

  return <div>Content</div>
}

function FixedComponent() {
  const navigate = useNavigate()

  // ✅ Correct - navigate in effect
  useEffect(() => {
    if (someCondition) {
      navigate({ search: { redirect: true } })
    }
  }, [someCondition, navigate])

  return <div>Content</div>
}

구현 참고 사항​

필요한 추가 콘텐츠:​

  • 불필요한 재렌더링을 방지하는 검색 매개변수 선택자
  • 검색 입력 업데이트 디바운싱
  • 비용이 큰 검색 계산을 위한 메모이제이션 전략
  • 검색 매개변수와 함께 사용하는 React.memo
  • 파생 검색 상태를 위한 useMemo 패턴
  • 검색 매개변수 배칭 기법
  • 검색 매개변수 성능 모니터링 및 프로파일링
  • 번들 크기 최적화 전략

추가할 상호 참조:​

  • 기반 내용은 setup-basic-search-params.md로 연결
  • 탐색 패턴은 navigate-with-search-params.md로 연결
  • 폼 디바운싱은 search-params-in-forms.md로 연결
  • 성능 디버깅은 debug-search-param-issues.md로 이어지는 링크 추가

필요한 README 업데이트:​

  • 프로그레시브 시리즈에서 가이드를 완료된 것으로 표시
  • 관련 가이드에서 "일반적인 다음 단계" 주석 해제