React 새로운 기능 - &#use&# 후크

React 19(RC 버전—2024년 9월 기준)은 인기 있는 웹 개발 라이브러리의 최신 릴리스입니다.
V19는 많은 새로운 기능과 후크를 제공하는 중요한 이정표입니다. 이 게시물에서는 이러한 후크 중 하나인 사용 후크에 대해 설명합니다.

사용 훅

이 후크를 사용하면 개발자는 복잡한 상태 관리 없이 수신된 Promise를 일시 중단하여 데이터 가져오기 또는 리소스 로드와 같은 비동기 작업이 완료될 때까지 UI 구성 요소 렌더링을 일시 중단할 수 있습니다.

데이터 가져오기 예시

클래식 접근 방식인 useEffect 후크를 사용하고 모의 API에서 데이터를 가져오는 간단한 구성 요소가 있습니다(저는 MSW를 사용하고 있습니다).
isLoading 및 isError 페치 상태와 함께 데이터 저장을 위한 로컬 상태를 관리합니다.

const [users, setUsers] = useState<any>(null);
const [isError, setIsError] = useState<boolean>(false);
const [isLoading, setIsLoading] = useState<boolean>(true);
</boolean></boolean></any>

페이지가 처음 로드되면 useEffect 후크를 실행하여 데이터를 가져와 저장하고 다양한 상태를 업데이트합니다.

const fetchData = async () => {
  const response = await fetch('/api/users');
  return response.json();
};


useEffect(() => {
  fetchData()
    .then(setUsers)
    .catch(() => setIsError(true))
    .finally(() => setIsLoading(false));
}, []);

요청이 처리되는 동안 또는 오류가 발생하는 경우 일부 UI가 표시됩니다.

if (isLoading) {
  return <h2 id="Loading">Loading...</h2>;
}
if (isError) {
  return <h2 id="Error">Error</h2>;
}

드디어! 사용자 목록을 렌더링합니다:

return ( 
  
    {users.map((user) => {
      return (
        <div>
          {user.lastName}, {user.firstName}
        </div>
      );
    })}
  >
);

상용구 코드가 많아요!

이제 리팩터링을 해보자!

useState 및 useEffect 후크를 제거해 보겠습니다. fetchData 메소드는 그대로 유지하겠습니다.
이제 약속을 취하고 JSON 데이터 또는 오류를 반환하는 새로운 사용 후크를 사용하여 데이터를 가져옵니다.

const users = use(fetchData());

이 후크의 작동 방식은 다음과 유사합니다.

const users = await fetchData();

isLoading 및 isError 처리

이러한 상태 변경을 처리하기 위해 앱 구성요소로 이동하겠습니다. 비동기 이벤트에 응답하도록 설계된 React Suspense 구성 요소를 사용하겠습니다. 하위 항목이 로드를 완료할 때까지 대체 UI를 표시합니다.

Suspense 작업 시 오류 처리를 위해 ErrorBoundary를 사용하는 것이 일반적입니다. React의 getDerivedStateFromError() 메서드를 구현하는 ErrorBoundary 구성 요소를 추가하겠습니다.

<errorboundary fallback="{<h2">Error}>
  <suspense fallback="{<h2">Loading...}>
    <userlist></userlist>
  </suspense>
</errorboundary>

몇 가지 추가 사항

여기서는 후크에 대한 일반적인 규칙이 적용되지 않습니다. 이 후크는 원하는 곳 어디에서나 사용할 수 있습니다!

일반 후크와 달리 use 후크는 if 문과 함께 조건부로 사용할 수 있으므로 트리거 여부를 결정할 수 있습니다. 예를 들어 새 API 요청을 기능 플래그로 래핑하고 테스트를 위해 전환하려면 기능 플래그를 UserList 구성 요소에 전달하고 사용 후크를 래핑하기만 하면 됩니다. 정말 간단해요!

이제 앱 구성 요소를 수정합니다.

<errorboundary fallback="{<h2">Error}>
  <suspense fallback="{<h2">Loading...}>
    <userlist testnewapi="{true}"></userlist>
  </suspense>
</errorboundary>

UserList 구성 요소 수정:

let users = [];
if(testNewApi){
  user = use(fetchData());
}

일반적인 방법을 사용하는 대신 이 후크를 사용하여 Context 객체를 얻을 수도 있습니다.

const data = useContext(myContext);

예를 들어 조건문을 기반으로 컨텍스트를 검색하려는 경우 여기에서 사용 후크를 사용할 수 있습니다.

결론

이 글에서는 use Hook의 구문을 간략하게 설명하고 사용 예를 제공했습니다. 이는 이러한 후크와 이를 효과적으로 구현하는 방법을 파악하는 데 도움이 됩니다. 이 정보가 귀하의 향후 프로젝트에 도움이 되기를 바랍니다.

위 내용은 React 새로운 기능 - &#use&# 후크의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!