useEffect 콜백에서 비동기 구문 사용

1. React에서 useEffect()란 무엇입니까?
2. React의 useEffect 내 async 구문을 사용하는 방법
3. React의 useEffect 내 async 구문을 사용하는 최상의 솔루션

React 버전 16.8이 출시되면서 라이브러리가 여러 가지로 변경되었습니다. 후크의 도입으로 기능적 구성요소는 상태를 유지하고 부작용을 처리할 수 있는 능력을 갖게 되었습니다.

useEffect()는 React의 기능적 구성 요소에 대한 핵심 후크 중 하나이며 특히 부작용을 처리하기 위해 만들어졌습니다. 알아내기는 매우 쉽지만 여전히 React 개발자가 알아야 할 몇 가지 주의 사항이 있습니다.

이 기사에서는 useEffect() 내에서 async 구문을 사용하는 방법과 같은 주의 사항 중 하나를 살펴봅니다.

React에서 useEffect()란 무엇입니까?

useEffect()는 기능적 구성 요소의 부작용을 처리할 수 있는 솔루션입니다. 이전에 클래스 구성 요소를 사용한 적이 있다면 수명 주기 메서드의 대안으로 생각할 수 있습니다.

React 애플리케이션의 부작용은 useEffect()로 제한되어야 합니다. 일반적인 예로는 시간을 계산하거나 요청을 통해 외부 데이터를 비동기적으로 로드하는 것이 포함되며, 이는 우리를 주요 주제로 안내합니다.

React의 useEffect 내 async 구문을 사용하는 방법

async 함수를 useEffect 콜백으로 사용하려고 하면 후크가 지원하지 않는다는 오류가 발생합니다.

데이터 로딩이나 다른 목적에 이 구문을 사용해야 하는 경우 정확히 무엇을 할 수 있습니까? 그리고 왜 React 제작자는 useEffect()를 async 구문과 호환되지 않도록 하기로 결정했습니까?

두 번째 질문부터 시작하겠습니다. useEffect()는 async 콜백을 지원하지 않습니다. 이러한 함수는 일반적으로 정리가 필요하기 때문입니다.

부작용은 섬세하게 처리해야 하며 후크 내부의 async 기능을 잘못 처리하면 메모리 누수나 기타 오류가 발생하여 애플리케이션이 노출될 수 있습니다. 이것이 React 팀이 이를 허용하지 않기로 결정한 이유입니다.

첫 번째 질문에 관해서는 다행히도 useEffect()에 async 함수를 오류 없이 넣을 수 있는 라이브러리가 있습니다.

React의 useEffect 내 async 구문을 사용하는 최상의 솔루션

async await 구문을 사용해야 하는 경우 가장 좋은 솔루션은 use-async-effect 패키지를 사용하는 것입니다. 이 패키지는 useEffect()와 기능이 동일하지만 async 구문을 사용할 수 있도록 약간 수정된 useAsyncEffect() 후크를 제공합니다.

배우기가 매우 쉽습니다. 일반 useEffect()와 동일한 인수를 허용합니다.

설치 및 기타 세부 사항에 대한 자세한 내용은 공식 문서를 참조하세요.