React 18 - Transition

React 18의 새로운 기능: Transition으로 사용자 경험 향상시키기

React 18은 다양한 새로운 기능과 개선 사항을 도입하면서, 특히 'Transition'이라는 개념을 통해 사용자 인터페이스의 반응성을 크게 향상시켰습니다. 이 기능은 React 애플리케이션의 상호작용을 더욱 부드럽고 자연스럽게 만들어, 사용자 경험을 개선하는 데 중점을 두고 있습니다.

Transition

Transition은 React 18에서 도입된 개념으로, "긴급하지 않은 상태 업데이트"입니다. 이를 통해 React는 중요한 업데이트에 우선순위를 두고, 사용자와의 상호작용을 방해하지 않으면서 백그라운드에서 상태 업데이트를 수행할 수 있습니다.

 

왜 Transition이 필요한가?

 

Transition의 필요성:

• React 애플리케이션에서는 여러 상태 업데이트가 동시에 발생할 수 있습니다. 이러한 상태 업데이트가 모두 즉시 처리되면, 중요한 사용자 인터랙션을 방해할 수 있고, 애플리케이션의 반응성이 떨어질 수 있습니다.
• Transition은 이러한 문제를 해결하기 위해 도입되었습니다. 어떤 상태 변화를 Transition으로 표시함으로써,바로 처리되어야하는 사용자 입력같은 상태 변화와 상대적으로 느려도 문제가 없는 상태 변화를 구분할 수 있습니다.
• 대표적인 예로, 검색 인풋과 그에 따른 검색 목록의 변경이 있습니다. 검색 인풋은 키보드 입력에 즉각적으로 반응하길 기대합니다. 하지만, 검색 목록은 결과를 가져오는데에 시간이 걸리고 사용자도 인풋만큼 빠를거라 기대하지 않습니다. 이런 경우 검색 목록을 Transition 처리하여 input 변경은 검색목록이 렌더 중이더라도 항상 빠르게 반응할 수 있도록 렌더 우선순위를 높여줄 수 있습니다.

 

탭 구조 예시 살펴보기

이해를 위해 React 문서의 useTransition에 나오는 예시와 함께 살펴보겠습니다.

https://react.dev/reference/react/useTransition

Transition이 없는 경우

(코드는 공식 문서에 있습니다.)

예제를 보면 처음에 Contact와 About 전환 시에는 즉각적인 반응을 하는 것을 볼 수 있습니다. 하지만 Posts를 클릭 한 이후에 유저가 Contact를 클릭해도 아무 반응이 없는 것을 볼 수 있습니다. Hover 효과도 적용이 되지 않고 있습니다. setState 호출 시, 느린 아이템들의 렌더링이 메인스레드를 블로킹하고 있는 상황입니다.

퍼포먼스 탭을 한번 살펴보면 위 상태를 알 수 있습니다. 클릭이벤트로 인해 발생한 렌더가 약 1초간 메인스레드를 막고, 그게 해소가 되어야 Contact 탭으로 변경이 일어납니다.

 

Transition을 사용하는 경우

이런 문제를 해결하기 위해 나온 트랜지션의 경우 어떤식으로 렌더를 처리하는지 살펴보겠습니다.

우선 예제를 실행해보면 위와같이 부드러운 전환을 볼 수 있습니다.

퍼포먼스탭을 살펴보면 다음과 같은 특징을 볼 수 있습니다.

• 트랜지션으로 등록한 렌더가 쪼개져있습니다.
• 클릭이 발생하자마자 기존 렌더링을 멈추고 다음 렌더로 넘어간 것을 볼 수 있습니다.
• 이를 통해 약 1초의 블로킹 시간 없이, 바로 전환이 된 것을 알 수 있습니다.

내부 작동 방식:

• Transition을 사용할 때, React는 해당 상태 업데이트를 'transition' 우선순위로 분류합니다. 이는 React 스케줄러가 이러한 업데이트를 일시 중단하고, 더 중요한 작업을 먼저 처리한 후에 나중에 이 업데이트를 재개할 수 있음을 의미합니다.
• 이 과정은 React의 내부의 Fiber reconciler와 lanes 시스템과 연결되어, 각종 업데이트가 서로 다른 우선순위를 가지고 효율적으로 관리될 수 있도록 합니다.

이와 같이 Transition의 사용은 React 애플리케이션에서 비동기적 상태 업데이트를 효과적으로 관리하고 사용자 경험을 향상시키는 데 중요한 역할을 합니다. Transition을 통해 개발자는 애플리케이션의 반응성을 높이고, 사용자에게 더욱 부드러운 인터랙션을 제공할 수 있게 됩니다.

 

다음글: https://blue-tang.tistory.com/96

React 18 - Transition과 외부 상태 관리 도구