-
Suspense가 하나만 존재할 경우
- 내부에 자식 컴포넌트가 하나이면,
- 자식 컴포넌트가 렌더링될 때까지 대기
- 내부에 자식 컴포넌트가 복수 개이면,
- 자식 컴포넌트가 모두 렌더링될 때까지 대기
-
입력창에 검색어를 입력하면, 검색결과가 뜨는 예제
- 새로운 검색어를 입력할 때마다, 검색결과를 보여줌
- Suspense를 이용해서 검색결과를 구현하면, 매번 새로운 검색어 입력 시, Loading 화면이 보임
- 새로운 검색결과를 지연해서 보여줌
- useDeferredValue를 사용하여, 새로운 검색어 (query)를 지연
- Suspense 하위의 검색결과에 지연된 검색어 (deferredQuery) 를 전달
- query는 입력창에 새로운 값이 반영됨
- deferredQuery는 검색결과 컴포넌트에서 데이터가 로드되기 전까지 이전 결과를 보여줌
deferred value나 Transition을 이용하면 Suspense Fallback을 표시하지 않을 수 있음
트랜지션은 전체 업데이트를 긴급하지 않은 것으로 처리
지연된값은 UI의 일부를 긴급하지 않은 것으로 처리
트랜지션은 렌더링 트리에서 바뀌지 않는 부분은 그대로 두고, 바뀌는 부분만 기다림