React의 use() Hook: 적용 방법 및 이유

이 새로운 후크는 많은 상용구 코드를 단순화하는 데 도움이 될 수 있습니다.

여러분이 개발하는 React 앱은 외부 API에서 데이터를 가져오는 경우가 많으며, React 팀은 이러한 요구 사항을 확실히 충족해 왔습니다. 그만큼사용()후크는 데이터 가져오기 프로세스를 단순화합니다.

이 후크를 사용하면 약속을 정의하고 애플리케이션 상태를 업데이트하는 데 필요한 상용구 코드의 양이 줄어듭니다. React의 모든 것을 알아보세요사용()후크와 React 프로젝트에서 이를 사용하는 방법.

예를 들어 다음 구성 요소를 고려하십시오.

React가 이 구성 요소를 렌더링하면 fetch()를 사용하여 API를 사용합니다. 그런 다음 요청이 성공한 경우 데이터를 구성 요소의 상태에 저장하거나isError그렇지 않은 경우 변수를 true로 설정합니다.

상태에 따라 API의 데이터나 오류 메시지를 렌더링합니다. API 요청이 보류 중인 동안 페이지에 "로드 중..." 텍스트가 표시됩니다.

위의 구성 요소는 상용구 코드로 가득 차 있기 때문에 약간 번거롭습니다. 이 문제를 해결하려면사용()코드를 연결하고 리팩토링하세요.

use() 후크를 사용하면 위 구성 요소를 단 두 줄의 코드로 줄일 수 있습니다. 하지만 그 전에 이 후크는 다소 새로운 것이므로 React의 실험적 버전에서만 사용할 수 있다는 점에 유의하세요. 따라서 해당 버전을 사용하고 있는지 확인하세요.

이제 후크를 사용할 준비가 되었습니다. 먼저 후크를 교체하세요.사용 상태그리고사용효과그냥 수입한다사용:

내부데이터 구성 요소에서 유지하려는 유일한 것은 가져오기 요청입니다. 하지만 가져오기 요청을사용() 훅; JSON 데이터 또는 오류를 반환합니다. 그런 다음 응답을 다음과 같은 변수에 설정합니다.데이터:

그게 다야! 보시다시피 위의 코드는 구성 요소를 단 두 줄의 코드로 줄입니다. 이는 이와 같은 시나리오에서 use() 후크가 얼마나 유용한지 보여줍니다.

중요한 부분은사용() 후크는 로딩 및 오류 상태를 처리합니다. 이 작업은 상위 구성 요소 내에서 수행할 수 있습니다.데이터.

로딩 기능을 구현하려면데이터구성 요소미결 . 이 구성 요소는 로드 상태에 있을 때마다 렌더링할 fallback prop을 사용합니다.

그만큼사용() 데이터 구성 요소의 후크는 이러한 서스펜스를 로드하도록 트리거합니다. 약속은 아직 해결되지 않았지만,앱 구성 요소는 대체 상태를 렌더링합니다. 그런 다음데이터구성 요소가 응답 데이터를 받으면 로드 상태 대신 콘텐츠를 렌더링합니다.

오류를 포착하려면 Error Boundary가 어떻게 작동하는지 알아야 합니다. 일반적으로 Suspense로 작업할 때 사용합니다.

오류 경계의 예는 다음 코드에 있습니다.

이 Error Boundary 예제에는 오류 상태와 오류가 무엇인지 추적하는 상태 개체가 있습니다. 다음으로 해당 오류에서 파생된 상태를 가져옵니다. 그만큼세우다() 함수는 오류가 있는 경우 대체 요소를 표시합니다. 그렇지 않으면 내부에 있는 모든 것을 렌더링합니다.<오류경계 />.

위의 구성 요소는 Suspense와 거의 동일하게 작동합니다. 따라서 App 구성 요소에서는 모든 것을 App 구성 요소 내부에 래핑할 수 있습니다.오류경계다음과 같은 구성요소:

중첩된 코드 중 하나라도 오류가 발생하면 오류 경계가 이를 포착합니다.getDerivedStateFromError()상태를 업데이트하면 "죄송합니다. 오류가 발생했습니다."라는 대체 텍스트가 렌더링됩니다.

따라서 use() 후크는 상용구 코드의 양을 줄이는 데 도움이 될 수 있으며 로드 및 오류 상태를 용이하게 합니다. 그러나 use() 후크에는 또 다른 매우 편리한 용도가 있습니다.

당신이 보낸다고 가정 해 봅시다가져와야 함부울을 소품으로 사용데이터구성 요소이며 다음과 같은 경우에만 가져오기 요청을 실행하려는 경우가져와야 함/strong>