useTransition을 이용한 리엑트 성능개선(한척)하기

• React의 useTransition 훅은 이미지 렌더링, 파일 렌더링, 비동기 처리, 많은 컴포넌트의 재렌더링 등으로 인해 컴포넌트 렌더가 지연되는 경우에 사용할 수 있다. 이는 실제 성능 개선이 아니라 코드의 동작 순서를 조작하여 성능 개선처럼 보이게 하는 것이다.

• useTransition 훅의 동작 원리는 컴포넌트가 렌더링 되는 것은 그 값이 변할 때인데, 보통 값이 변하는 것은 함수로 인해 변하므로, 해당 함수를 지정해 주고 그 함수로 변경되는 컴포넌트를 먼저 렌더링 처리해 주는 것이다. 이를 통해 우선순위를 바꿔 성능이 향상되는 것처럼 보일 수 있다.

• React의 useTransition 훅을 사용하면 렌더링 우선순위를 조절할 수 있어, 사용자 경험을 향상시킬 수 있다. 예를 들어, 인풋 변경이 먼저 렌더링되고 그 다음에 다른 요소들이 렌더링되도록 설정할 수 있다.

• useTransition 훅은 또한 렌더링이 진행 중인지 아닌지를 알려주는 isPending 값을 제공한다. 이를 활용하면 렌더링이 완료되기 전에 로딩 중임을 사용자에게 알려줄 수 있다.