React의 비동기 파생

문제가 있습니다. 비동기는 어렵습니다.

searchText를 매개변수로 받는 검색인 간단한 GET API가 있다고 상상해 보세요. 선호하는 http 요청 도구를 사용하여 호출하고 약속을 받으면 검색 중인 모든 항목의 목록이 확인됩니다.

React 컴포넌트에서 어떻게 호출하나요?

우선 한 가지 중요한 점은 제가 설명한 내용을 다음과 같이 모델링할 수 있다는 것입니다.

result = await searchAPI(searchText);

여기서 개념을 잡겠습니다. 이것은 파생어입니다. searchText 버전마다 다른 결과를 얻을 수 있습니다. 하지만 여기에는 몇 가지 문제가 있습니다.

• 외부 데이터입니다.
• Promise를 반환합니다.

React에서 어떻게 파생형으로 부를 수 있나요?

TanStack Query 및 SWR과 같은 타사 라이브러리를 사용하면 문제가 해결됩니다. 이는 React 구성 요소에서 사용할 수 있는 후크를 제공하여 상태와 속성을 수신하고 API가 변경되면 API로 다시 계산(다시 가져오기)합니다. 다음 예를 보세요:

const { data: searchResult, loading } = useQuery({queryKey: [search, searchText],queryFn: getSearch,});

좋아, 비동기 파생을 해결했지?

그렇지 않습니다.

그런데 저는 항상 이 라이브러리 중 하나를 사용하는 것을 권장합니다. 이 라이브러리는 훌륭하고 더 복잡한 경우(예: 다시 가져오기, 재시도, 캐시 제어 등)에서 많은 시간을 절약해 주지만 세 번째 라이브러리는 기대할 수 없습니다. -React의 개념적 문제를 해결하기 위한 파티

다시 반응형으로 돌아가서 파생 모델에서 비동기 사례를 처리하는 방법이 필요합니다. React는 이 경우에 대한 기본 요소를 제공해야 합니다. 음, 버전 18까지는 없었으나 19에서는 다릅니다.

'사용' 사례

React 19에는 use라는 새로운 기본 요소가 도입되었습니다. 예, 이름이 약간 혼란스럽기는 하지만 React의 반응성 모델에 대한 역할은 매우 중요합니다. 이를 통해 구성 요소를 렌더링하는 동안 약속을 해결할 수 있습니다. 파생이 누락되었습니다.

그 전에는 구성 요소를 렌더링하는 동안 가져오기를 호출하는 유일한 방법은 useEffect를 사용하고 Promise를 호출한 다음 then 절에서 응답으로 제공되는 값으로 상태를 설정하는 것이었습니다. 그것은 효과가 있었지만 효과를 사용하는 데 모든 문제가 있었습니다.
use 프리미티브를 사용하면 컴포넌트를 렌더링하는 동안 Promise를 해결할 수 있으며, State와 Prop을 사용하여 Promise를 생성한 다음 이러한 Promise를 해결하고 이를 함수와 JSX에서 사용할 수 있습니다.

const useCountTotal = (count: number) => {
  const countTotalPromise = useMemo(() => genericPromise(count), [count]);


  const result = use(countTotalPromise);


  return result;
}


function AsyncDerivation({count}: { count: number}) {
  const result = useCountTotal(count);

  return (
    <div>Total count is: {result}</div>
  )
}

제가 이 글을 쓰고 있는 현재에는 아직 React 19의 최종 릴리스가 없습니다. 몇 가지 주의 사항이 있으며 아마도 원시 버전은 앞으로 더 많은 곳에서 작동하도록 진화할 것입니다.

원시적 용도의 구체적인 한 가지 점은 Suspense와 함께 사용해야 한다는 점인데, 여기에는 아주 좋은 이유가 있습니다.

비동기 및 React 구성 요소

await의 개념적 아이디어는 좋지만 React 구성 요소와 결합하면 결함이 있습니다. 렌더링 중에는 대기만 사용할 수 없습니다. React는 구성 요소를 호출하여 JSX 응답을 얻고 이를 흐름에서 사용하여 UI를 렌더링합니다.

대기 중에 모든 것을 중지할 수 있다면 React는 해당 구성 요소의 하위 항목에 액세스할 수 없으며 트리 끝까지 작업을 계속할 수 없습니다. 렌더링 흐름을 중단하고 UI가 업데이트되지 않고 정지되도록 하겠습니다.

어떻게 해결하나요?

이 기사에서 사용한 두 가지 예를 살펴보겠습니다. 첫 번째는 렌더링 흐름을 차단하지 않고 로드와 같은 플래그를 반환하는 접근 방식을 취합니다. Promise가 해결되면 재렌더링이 발생하고 플래그가 업데이트되며 로딩이 false로 바뀌고 데이터가 응답 데이터를 받습니다.

사용 방식이 다릅니다. 이는 실제로 대기 프리미티브처럼 동작하므로 구성 요소 렌더링 흐름이 해결될 때까지 거기서 중지됩니다.

잠깐 잠깐만 문제라고 했죠?

여기서 구원에 대한 서스펜스가 등장합니다. use 프리미티브를 사용하면 Suspense 구성 요소에 래핑되고 렌더 흐름은 사용 해결 대기를 중지하며 사용자는 UI에 대체 렌더링을 가져옵니다(일반적으로 로딩 스피너 또는 스켈레톤, 이는 우리가 거기에 몇 가지 항목을 로드 중입니다).

사용 약속이 해결되면 이에 따라 렌더링을 계속하고 UI를 업데이트합니다. useEffect를 사용할 필요가 없습니다.

결론

use 프리미티브는 Suspense를 사용하고 비동기 동작으로 작업하려는 라이브러리 작성자에게 매우 유용합니다. 앱 개발자의 경우 기본 반응성 모델에서 간단한 사용 사례에 매우 적합한 사례를 하나 더 수정합니다. Promise를 래핑하므로 http 요청에만 국한되지 않고 모든 비동기 사례 및 외부 API 사용에 대해 제한되므로 생태계에 더 많은 리소스를 추가할 수 있습니다.

위 내용은 React의 비동기 파생의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!