useEffect2 [react-query] useEffect에서 react-query의 useMutation을 사용할 때 dependencies 으로 인한 무한 요청 해결방법 react-query를 사용해서 POST 요청을 하기 위해서는 react-query의 mutate를 사용하고, 비동기 요청을 위해서는 mutateAsync를 사용한다. 페이지에 접속했을 때, POST 요청을 보내는 시나리오가 있어서 아래와 같이 useMutation을 선언하고, useEffect에 mutateAsync를 호출했다. 회사와 관련된 코드가 있어서 간단하게 작성했다. 위와 같이 선언 및 호출을 하고, 페이지에 접속하고, 크롬 개발자도구의 Network 탭에 접속해보면 해당 요청이 2000~3000개 이상 요청된다. 이런 현상이 발생하는 이유는 mutateAsync를 통해서 POST 요청이 실행되고, 해당 요청으로 인해서 mutation 객체가 변경되었기 때문에, useEffect가 다시 실행되.. 2022. 7. 13. useEffect의 cleanup 함수 내에서 DOM Ref 사용하기 React를 이용해 어플리케이션을 개발할 때, useRef 로 DOM에 접근해 이벤트를 설정하거나, DOM을 함수 파라미터로 사용하는 경우가 있습니다. 간단한 예시를 통해 먼저 살펴보겠습니다. App 컴포넌트가 마운트되면, useEffect에서 태그에 이벤트를 할당하고, unmount될 때, 이벤트를 제거하도록 설정했습니다. import { useEffect, useRef } from "react"; export default function App() { const divRef = useRef(null); const handleEvent = () => { alert("click"); }; useEffect(() => { if (!divRef.current) { return; } divRef.curren.. 2021. 5. 28. 이전 1 다음
