React가 더욱 훌륭해졌습니다.

이전에 react 또는 next.js 애플리케이션에 대해 작업한 적이 있다면 일반적으로 특히 비동기를 처리하는 방법과 관련하여 매우 독단적이라는 것을 알아차렸을 것입니다. 반응 애플리케이션에서 데이터를 가져오는 방식에 큰 역할을 했습니다. 지금까지 useEffect , useSWR 또는 최근에는 react-query 을 사용했습니다. 그러나 이제 우리는 모든 것을 비동기화하고 특히 데이터 가져오기를 훨씬 쉽게 만들어주는 흥미로운 새로운 반응 기능을 얻고 있습니다.

사용 후크 소개

More info here

본질적으로 우리는 마침내 React에서 비동기 기능을 처리하는 기본 방법을 얻게 되었습니다. 즉, 데이터를 가져오기 위해 useEffect에 의존할 필요가 없으며 간단히 axios 가져오기 요청을 생성하고 use 후크로 래핑할 수 있습니다.

예를 들어:

export const Post = (id:string) => {
  const fetchPost = axios.get(`/api/posts/${id}`));
  const post = use(fetchPost);
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  )
}

이렇게 하면 게시물 데이터를 가져와서 페이지에 렌더링합니다. 아니요useEffect가 필요하거나 다른 비동기 처리 라이브러리가 필요합니다. 🎉

사용 후크는 어떻게 작동합니까?

await와 유사하게 이것은 단순히 약속의 값을 풀어줍니다. 즉, 모든 비동기 동작을 이제 사용 후크로 감쌀 수 있으며 반응은 기본적으로 우리를 위해 약속을 처리합니다.

그렇다면 여전히 반응 쿼리가 필요합니까?

응 우리는 그래. use 후크는 반응에 대한 훌륭한 추가 기능이지만 여전히 반응 쿼리를 대체하지는 않습니다. use 후크는 캐싱이나 다른 고급 기능이 아닌 비동기 동작을 처리하기 위한 것입니다. 따라서 고급 데이터 가져오기 라이브러리를 찾고 있다면 react-query를 사용하는 것이 좋습니다. 그러나 그것은 react 팀을 위한 올바른 방향으로 나아가는 단계이며 react 생태계에 환영받는 추가 사항입니다. 커뮤니티가 이 새로운 기능으로 무엇을 하는지 보고 싶습니다. 🤩

기타 흥미로운 사항

다른 모든 후크와 달리 use 후크는 조건부 실행을 지원하는 것으로 보입니다. react-query의 enabled 옵션과 매우 유사합니다. 이는 어떤 조건에 따라 조건부로 데이터를 가져올 수 있음을 의미합니다. 이것은 물론 다른 훅에서 지원되지 않으며 use 훅이 이것을 지원하는 유일한 훅으로 보입니다. RFC의 멋진 향후 제안은 React Context를 use hook에서도 래핑할 수 있다는 것입니다. 보다 선언적인 방식으로 컨텍스트를 사용할 수 있습니다. 이것이 최종 RFC에 포함되는지 확실하지 않지만 흥미로운 아이디어입니다.

결론

이것은 지금까지 react에서 곧 출시될 가장 멋진 기능 중 하나입니다. 저는 개인적으로 다음 프로젝트에서 그것을 사용하기를 기다릴 수 없습니다. 이 새로운 후크에 대한 흥미로운 사용 사례를 많이 보게 될 것이라고 확신합니다. use hook에 대해 자세히 알아보려면 RFC를 확인하는 것이 좋습니다. 매우 흥미로운 읽기이며 반응 팀이 새로운 기능에 대해 어떻게 생각하는지에 대한 훌륭한 통찰력입니다.