UseEffect 정리를 위한 초보자 가이드: 사용 방법 및 시기.
4250 단어 webdevbeginnersreactjavascript
다음은 효과에 대해 생각해 볼 수 있는 부작용의 몇 가지 예입니다.
useEffect 정리 기능이란 무엇입니까?
useEffect 정리 함수는 구성 요소가 마운트 해제되기 전에 메모리 누수를 방지하고 함수에서 원치 않는 동작을 제거할 수 있습니다.
이에 대한 몇 가지 사용 사례는 다음과 같습니다.
이제 아래 코드를 살펴보십시오. 이상한 점을 눈치채셨나요?
import React from "react";
export default function App() {
const [count, setCount] = React.useState(0);
React.useEffect(() => {
setTimeout(() => {
console.log("effect is running!");
setCount((count) => count + 1);
}, 1000);
});
return (
<div className="App">
<h1>You clicked {count} times!</h1>
</div>
);
}
💡 Note - How it keeps counting even though it should only count once!
부작용은 모든 렌더링에서 실행되는 useEffect에 속한다는 것을 기억하십시오. 즉, 카운트가 변경되면 렌더링이 발생하고 다른 효과가 트리거됩니다.
이 문제를 어떻게 해결할 수 있습니까?
부작용이 실행되는 시기를 제어하는 방법에는 여러 가지가 있습니다. 종속성 배열을 허용하는 두 번째 매개변수를 항상 포함해야 합니다.
이것이 없으면 효과는 렌더링할 때마다 실행되고 상태를 설정하면 효과가 다시 트리거됩니다. 종속성 배열에서 항상 변경되는 값을 지정하는 경우에도 무한 루프가 발생할 수 있습니다. 하나씩 제거하면 어느 것인지 알 수 있습니다. 그러나 사용하는 종속성을 제거하는 것(또는 맹목적으로 []을 지정하는 것)은 일반적으로 잘못된 수정입니다. 대신 문제의 원인을 해결하십시오.
따라서 문제를 해결하기 위해 매우 쉽고 간단한 useEffect 정리 함수를 작성할 것입니다. 아래와 같이 useEffect에서 함수를 반환합니다.
useEffect(() => {
//effect is running
return () => {
//clean up the effect
}
}, [input])
정리는 언제 실행됩니까?
효과가 함수를 반환하면 React는 정리할 시간이 되면 함수를 실행할 것입니다. 이해하기 어렵다고 걱정하지 마세요. 아래 예를 통해 더 잘 이해할 수 있습니다.
이전의 카운터 데모를 수정하고 Counter 구성 요소가 마운트 해제될 때 실행되고 타이머를 중지하는 정리 기능을 소개합니다.
이 예제에서 useEffect 후크는 한 번 실행된 다음 count 변수가 업데이트될 때마다 다시 실행되는 변수에 종속됩니다.
import React from "react";
export default function App() {
const [count, setCount] = React.useState(0);
const [total, setTotal] = React.useState(0);
React.useEffect(() => {
setTimeout(() => {
console.log("effect is running!");
setTotal((count) => count * 2);
}, 1000);
}, [count]);
return (
<div className="App">
<h1>You clicked {count} times!</h1>
<button onClick={() => setCount((count) => count + 1)}>+</button>
<p>Total: {total}</p>
</div>
);
}
💡 Note - If there are multiple dependencies, they should be included in the useEffect dependency array.
//clean up the timer at the end of the useEffect hook
import React from "react";
export default function App() {
const [count, setCount] = React.useState(0);
React.useEffect(() => {
let timer = setTimeout(() => {
console.log("effect is running onMount!");
setCount((count) => count * 2);
}, 1000);
return () => {
console.log("component unmounts");
clearInterval(timer);
};
}, []);
return (
<div className="App">
<h1>You clicked {count} times!</h1>
<button onClick={() => setCount((count) => count + 1)}>+</button>
</div>
);
}
useEffect를 사용하면 기본적으로 사물이 동기화됩니다. 효과를 실행하고 한 번만 정리하려면(마운트 및 마운트 해제 시) 빈 배열([])을 두 번째 인수로 전달할 수 있습니다. 이것은 당신의 효과가 props나 state의 어떤 값에도 의존하지 않는다는 것을 React에게 알려주므로 다시 실행할 필요가 없습니다.
빈 배열([])을 전달하면 효과 내부의 소품과 상태는 항상 초기 값을 갖습니다. 두 번째 인수로 []를 전달하는 것이 친숙한 componentDidMount 및 componentWillUnmount 정신 모델에 더 가깝지만 일반적으로 효과를 너무 자주 다시 실행하지 않도록 하는 더 나은 솔루션이 있습니다. 또한 React는 브라우저가 페인팅될 때까지 useEffect 실행을 연기하므로 추가 작업을 수행하는 것이 문제가 되지 않습니다.
결론
읽어주셔서 감사합니다. 연결해 봅시다!
언제든지 내email newsletter를 구독하고 에서 연결하세요.
Reference
이 문제에 관하여(UseEffect 정리를 위한 초보자 가이드: 사용 방법 및 시기.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/hr21don/a-beginners-guide-to-useeffect-cleanup-how-and-when-to-use-it-5a4g텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)