React는 사용자 인터페이스 구축에 널리 사용되는 JavaScript 라이브러리입니다. 재사용 가능한 UI 구성 요소를 만드는 데 효율성과 초점을 맞춘 것으로 알려져 있습니다. React의 주요 기능 중 하나는 React 상태에 연결되는 기능인 후크를 도입하는 것입니다. 그 후크 중 하나가 useTransition 후크입니다. 이 후크를 사용하면 인터페이스를 차단하지 않고 상태 변경이 발생하여 원활한 경험이 가능합니다.

useTransition 후크 이해

useTransition 후크를 더 잘 이해하기 위해 다음 예제를 살펴보겠습니다.

import {useState} from "react"

const App = () => {
  const [post, setPost] = useState(undefined)

  const fetchData = async () => {
    await fetch("https://jsonplaceholder.org/posts/1")
      .then((result) => result.json())
      .then((result) => setPost(result))
  }

  return(
    

      {post !== undefined && (
      

        
{post?.title}
        
{post?.content}
      
      )}
      
        Get post
      
    
  )
}

export default App; 

인터넷 속도가 느리거나 fetchData 함수 내에서 실행되는 작업이 얼마나 무거운지에 따라 버튼을 클릭하면 가져오기 작업 중에 UI가 정지되어 사용자 경험이 저하될 수 있습니다. 또한 사용자가 애플리케이션을 남용하는 것을 원하지 않는 경우 사용자가 버튼을 스팸할 가능성이 있습니다. 또한 애플리케이션은 작업이 진행 중이라는 표시를 사용자에게 표시하지 않습니다.

이러한 문제는 useTransition 후크를 사용하여 쉽게 해결할 수 있으며 이전 코드를 다음과 같이 업데이트할 수 있습니다.

import {useState, useTransition} from "react"
import {ImSpinner2} from "react-icons/im"

const App = () => {
  const [pending, startTransition] = useTransition()
  const [post, setPost] = useState({})

  const fetchData = () => {
    startTransition( async () => {
      await fetch("https://jsonplaceholder.org/posts/1")
        .then((result) => result.json())
        .then((result) => setPost(result))
    })
  }

  return(
    

      {post !== undefined && (
      

        
{post.title}
        
{post.content}
      
      )}
      
        {pending ?  : "Get post" }
      
    
  )
}

export default App; 

호출된 useTransition 후크는 두 가지 값을 반환합니다. 작업이 실행되고 startTransition 함수에 더 긴급한 작업으로 인해 중단되는 작업이 포함되어 있으면 어떤 값이 true가 될지 보류 중입니다.

위의 예에서는 startTransition 함수 내부에 있는 비동기 화살표 함수에 가져오기 요청을 래핑했습니다.

그리고 버튼에서 보류 중으로 연결된 비활성화된 속성을 포함하는 방식으로 수정하고 작업이 보류 중일 때 스피너를 표시하고 작업이 보류 중일 때 "게시물 가져오기" 라벨을 표시하도록 버튼 라벨을 변경했습니다. 작업이 보류 중이 아닙니다.

이를 통해 원활한 사용자 경험을 제공하고 더 나은 성능을 제공하며 사용자의 잘못된 행동으로부터 애플리케이션을 보호할 수 있습니다.

결론

useTransition 후크는 원활한 사용자 경험을 갖춘 고성능 React 애플리케이션을 구축하기 위한 판도를 바꾸는 것입니다. 잠재적으로 느린 작업 중에 UI가 응답성을 유지하고 UI 정지를 방지하여 전반적인 사용자 경험을 향상시킵니다.