startTransition used in error.tsx

안녕하세요

6.5)에러 핸들링(error.tsx) 강의의 18:34초에서 startTransition을 사용했는데 궁금한 것이 있어서 QA올립니다.

startTransition이라고 함은 공식문서에서

``` action: 하나 이상의 set 함수를 호출하여 일부 상태를 업데이트하는 함수입니다. React는 매개변수 없이 즉시 action을 호출하고 action 함수 호출 중에 동기적으로 예약된 모든 상태 업데이트를 Transitions으로 표시합니다. action에서 await된 비동기 호출은 Transition에 포함되지만, 현재로서는 await 이후의 set 함수 호출을 추가적인 startTransition으로 감싸야 합니다(문제 해결 참조). Transitions으로 표시된 상태 업데이트는 non-blocking 방식으로 처리되며,
``` 불필요한 로딩 표시가 나타나지 않습니다.

이렇게 나와있는데
어떻게

onClick={()=> {
  router.refresh();
  reset();
}}

onClickHandler가 의도하지 않게 작동할 때, startTransition을 사용하려는 생각을 가지게 되었는지가 궁금합니다.

그리고 강의 내용에서 router.refresh() 가 비동기라고 이야기 해주셔서
비동기인지도 확인해보려고 공식문서등을 확인했는데 안보여서 링크 공유등을 해주시면 감사합니다.

안녕하세요, 인프런 AI 인턴입니다. 최문길님.

다룬 주제에 대한 설명을 드리자면, startTransition은 React 18에서 도입된 기능으로, UI 업데이트를 비차단적(non-blocking)으로 수행할 수 있도록 돕습니다. 이는 주로 사용자 인터페이스의 성능 최적화를 위해 사용되며, 예를 들어 큰 데이터 세트를 렌더링하는 경우 UI의 응답성을 유지하기 위해 이 기능을 활용할 수 있습니다.

질문에서 언급하신 코드 구성에서는 router.refresh()와 reset() 메서드를 사용했다고 하셨는데요, 이는 일반적으로 사용자가 어떤 동작을 수행할 때 UI의 상태를 초기화하거나 최신 정보를 반영하는 데 사용합니다. startTransition을 사용하면 해당 작업을 “비차단적”으로 처리할 수 있게 되어 사용자 경험을 향상시킬 수 있습니다.

이 과정에서 startTransition이 사용되면, 비차단적 방식으로 동작 상태 업데이트가 실행되어, 불필요한 로딩 과정 없이 사용자에게 부드러운 UI 경험을 제공하게 됩니다. 이와 같이 startTransition을 활용함으로써 복잡한 컴포넌트 처리 과정에서도 UI의 안정성을 유지할 수 있습니다.

관련 질문에 대한 이전의 답변과 강의 내용에 대한 개선 및 일부 녹화 교체가 진행되었다고 강사님이 언급하셨습니다. 유사한 주제에 대한 상세 답변은 아래 게시물을 참조하시길 추천드립니다:

6.5 에러핸들링) startTranstion 질문입니다!
- 이 게시물에서는 startTransition에 대한 설명과 함께 비동기 작업 처리 방식에 대한 상세한 설명을 제공합니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변