React 19와 React Native New Architecture에 대해서 공부를 진행하려고 하다가 useTransition이 눈에 들어왔다. React 18에서 나온 녀석인데 당시에 크게 와닿지 않는 기능이고 활용도가 잘 이해가 되지 않아서 넘겼는데 지속적으로 눈에 밟혀서 조금 깊게 들여다 보기로 했다.

useTransition Hook은 무엇인가

useTransition은 React 18에 도입된 hooks로, 비동기 업데이트와 로딩 상태 동안의 사용자 경험을 관리할 수 있게 해준다. 말이 조금 와닿지 않는데, 예를 들어서 설명해 보겠습니다.

넷플릭스 컨텐츠 검색에서 useTransition 활용

문제상황

• 넷플릭스 앱에서 내가 보고 싶은 컨텐츠를 검색하는 상황을 가정한다
• 검색창에 보고싶은 컨텐츠(Squid Game)을 검색하려고 S를 입력하는 순간 API 요청이 이루어진다.
• 엄청난 양의 S가 포함된 컨텐츠가 검색되어 리스트로 전달이 된다.
• 이 과정에서 유저의 입력과 검색 리스트 필터링이 동시에 이루어져서 렉이 발생한다

useTransition 활용

• useTransition은 상태 업데이트의 우선순위를 낮춰서 UI 렌더링 지연을 방지해줄 수 있다
• 이 경우에는 검색 리스트를 갱신하는 로직은 낮은 우선순위로, 유저의 입력을 보여주는 것은 높은 우선순위로 설정하면 사용자 입력에 대한 UI 업데이트가 지연되지 않게 된다.
• 이를 통해 더 부드러운 사용자 경험을 제공한다

useTransition의 사용법

위에서 설명했듯이 useTransistion은 state 업데이트를 중요한 것과 중요하지 않은 것으로 구분할 수 있게 해준다. 중요하지 않은 업데이트는 다른 업데이트와 병렬로 처리되지만, 이로 인한 랜더링은 다른 업데이트가 완료된 후에 이루어진다.

useTransition hook을 사용하면 [isPending, startTransition]이라는 두 개의 값을 반환한다.

const [isPending, startTransition] = useTransition();