startTransition used in error.tsx

한 입 크기로 잘라먹는 Next.js(v15)

6.5) 에러 핸들링 (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() 가 비동기라고 이야기 해주셔서
비동기인지도 확인해보려고 공식문서등을 확인했는데 안보여서 링크 공유등을 해주시면 감사합니다.

next.js

답변 2

이정환 Winterlood

지식공유자

안녕하세요 이정환입니다.

어떻게 이런 경우에 startTransition을 사용할 생각을 떠올렸냐고 질문 주신게 맞을까요? 질문이 정확히 이해되지 않아 우선 이렇게 가정하고 답변드리겠습니다. (만약 아니라면 답글로 남겨주세요)

React19의 startTransition 메소드는 콜백함수 안에 묶인 전체의 과정을 하나의 단위로 관리합니다. 따라서 startTransition을 사용하면 다음 두 과정을 일괄적으로 진행시킬 수 있습니다.

router.refresh()를 통해 서버 컴포넌트의 실행 결과를 다시 불러오는 과정
reset()을 통해 UI를 다시 렌더링 시키는 과정

추가로 Next.js의 router.refresh()가 비동기로 동작한다는 것에 대한 링크를 요청하셨는데요 공식 문서에는 해당하는 내용이 명확히 나와있지는 않습니다.

그러나 본 링크의 아래 캡쳐한 부분을 읽어보시면 router.refresh() 메서드는 Making a new request to the server 라고 하여 서버에게 새로운 요청을 발송한다고 나와 있습니다. 기본적으로 웹 브라우저가 서버에게 보내는 요청은 모두 비동기로 동작하기 때문에 이를 통해 비동기적으로 동작한다고 유추할 수 있습니다.

인프런 AI 인턴

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

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

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

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

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

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

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

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

startTransition used in error.tsx