React.js
단일 목적의 useEffect
Dev갱이
2023. 1. 17. 09:21
728x90
function App() {
const [varA, setVarA] = useState(0);
const [varB, setVarB] = useState(0);
// 이렇게 하면 안된다!
useEffect(() => {
const timeoutA = setTimeout(() => setVarA(varA + 1), 1000);
const timeoutB = setTimeout(() => setVarB(varB + 2), 2000);
return () => {
clearTimeout(timeoutA);
clearTimeout(timeoutB);
};
}, [varA, varB]);
return (
<span>
Var A: {varA}, Var B: {varB}
</span>
);
}
보다시피, 한번 상태 변경으로 varA와 varB 두 상태 변수에 업데이트가 발생하게 된다. 그래서 이 훅은 정상적으로 동작하지 않는다.
예제는 짧은 코드기 때문에 문제점이 명확하게 보이지만 더 많은 코드와 더 많은 변수를 갖고 있는 긴 함수였다면 문제를 발견하기 힘들 것이다. 그러니 옳은 방향으로 useEffect를 분리해 수정해보자.
이런 경우라면 코드는 아래와 같이 작업해야 한다.
function App() {
const [varA, setVarA] = useState(0);
const [varB, setVarB] = useState(0);
// 옳은 방법
useEffect(() => {
const timeout = setTimeout(() => setVarA(varA + 1), 1000);
return () => clearTimeout(timeout);
}, [varA]);
useEffect(() => {
const timeout = setTimeout(() => setVarB(varB + 2), 2000);
return () => clearTimeout(timeout);
}, [varB]);
return (
<span>
Var A: {varA}, Var B: {varB}
</span>
);
}
[출처]https://ui.toast.com/weekly-pick/ko_20200916
리액트 useEffect 개발자가 알아야 할 네가지 팁
리액트 훅의 useEffect를 사용할 때 꼭 알아야 할 네 가지를 공유하려고 한다.
ui.toast.com
728x90