์ผ | ์ | ํ | ์ | ๋ชฉ | ๊ธ | ํ |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
- ์๋ฐ์คํฌ๋ฆฝํธ#JS#slice#splice
- react
- removeCookie
- js
- slice/splice/split
- ์๋ฐ์คํฌ๋ฆฝํธ#์กฐ๊ฑด๋ฌธ#๋ฌธ์์ด
- redux์ํ์ ์ง
- for~in/for~of
- https://dasima.xyz/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%A0%9C%EA%B3%B1-math-pow-%EA%B3%84%EC%82%B0/
- Beesbeesbees
- https://www.daleseo.com/js-array-slice-splice/
- ์๋ฐ์คํฌ๋ฆฝํธ
- dom
- JS#3์ผ์ฐจ๋ฌ๋ฆฌ์#์ด๋ฐ์ธ๋ฐ#์๊ฐ๊ธ๋ฐฉ~
- https://developer-talk.tistory.com/299
- children vs childrenNodes
- variable#function
- ์๋ฐ์คํฌ๋ฆฝํธ#JS#var#let#const#undefined#null
- @redux-toolkit
- UI
- ๋ ธ๋๊ต๊ณผ์
- CSS
- ๋ด์ฅ๊ณ ์ฐจํจ์
- https://lo-victoria.com/introduction-to-redux-toolkit-for-beginners
- User Flow
- ใทใ
- ํท๊ฐ๋ฆฐ๋ค~
- UX
- toString#String
- cmarket
- Today
- Total
Daily Front_Minhhk
[React] memory leak error (useEffect cleanup function)__Can't perform a React state update on an unmounted component. ๋ณธ๋ฌธ
[React] memory leak error (useEffect cleanup function)__Can't perform a React state update on an unmounted component.
Minhhk 2024. 2. 27. 14:42๐ Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
์ปดํฌ๋ํธ๊ฐ ์ธ๋ง์ดํธ๋ ํ์ ์ํ ์ ๋ฐ์ดํธ๋ฅผ ์๋ํ๊ธฐ ๋๋ฌธ์ ๋ฐ์ํ๋ค.
์ปดํฌ๋ํธ๊ฐ ์ธ๋ง์ดํธ๋ ๋ ์งํ ์ค์ธ ๋น๋๊ธฐ ์์ ์ ์ทจ์ํ๊ฑฐ๋, ์ปดํฌ๋ํธ์ ์ํ๋ฅผ ์ ๋ฐ์ดํธํ์ง์๋๋ก ํด์ผํ๋ค.
→ useEffectํ ์์์ ํด๋ฆฐ์ ํจ์๋ฅผ ๋ฐํํ์ฌ, ์ปดํฌ๋ํธ๊ฐ ์ธ๋ง์ดํธ๋๊ธฐ ์ ์ ํ์ํ ์ ๋ฆฌ ์์ !
→ dataFetching ์ดํ ์ํ ์ ๋ฐ์ดํธ๋ฅผ ํ๊ธฐ ์ ์ ์ปดํฌ๋ํธ๊ฐ ์ฌ์ ํ ๋ง์ดํธ๋ ์ํ์ธ์ง๋ฅผ ํ์ธํ๋ ๋ฐฉ๋ฒ์ผ๋ก ๋ฌธ์ ํด๊ฒฐ
์ด์ ์ฝ๋
const MSearch = () => {
const { searchText } = useParams();
const axiosAuth = useAxiosAuth();
const [data, setData] = useState([]);
const [results, setResults] = useState([]);
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
if (searchText !== '') {
const searchRule = async () => {
setIsLoading(true);
const response = await axiosAuth({
method: 'POST',
url: '/api/~~~',
data: { searchText },
});
setData(response.data);
setResults(response.data);
setIsLoading(false);
};
searchRule();
}
}, [searchText]);
return ( ... )
}
๋ณ๊ฒฝ ๋ ์ฝ๋
const MSearch = () => {
const { searchText } = useParams();
const axiosAuth = useAxiosAuth();
const [data, setData] = useState([]);
const [results, setResults] = useState([]);
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
// ๋ง์ดํธ ์ํ๋ฅผ ์ถ์ ํ๋ ๋ณ์
let isMounted = true;
if (searchText !== '') {
const searchRule = async () => {
setIsLoading(true);
try {
const response = await axiosAuth({
method: 'POST',
url: '/api/~~~',
data: { searchText },
});
if (isMounted) { // ๋ง์ดํธ๋ ์ํ -> ์
๋ฐ์ดํธ
setData(response.data);
setResults(response.data);
setIsLoading(false);
}
} catch (error) {
console.error(error);
if (isMounted) { // ๋ง์ดํธ๋ ์ํ -> ์๋ฌ
setIsLoading(false);
}
}
};
searchRule();
}
// + ํด๋ฆฐ์
ํจ์,,, ๋ง์ดํธ ์ํ false
return () => {
isMounted = false;
};
}, [searchText]);
return ( ... )
};
>>
React์ useEffect ํ ์ ์ฌ์ฉํ ๋, ํด๋ฆฐ์ (clean-up) ํจ์๋ฅผ ์ ์ํ์ฌ ๋น๋๊ธฐ ์์ ์ด๋ ๊ตฌ๋ ์ ์ ๋ฆฌํ ์ ์๋ค.
์ด๊ฒ์ ์ปดํฌ๋ํธ๊ฐ ์ธ๋ง์ดํธ๋๊ฑฐ๋ ์ฌ๋๋๋ง๋๊ธฐ ์ ์ ์คํ๋์ด์ผ ํ๋ ์์ ์ ์ํํ๋ ๋ฐ ์ฌ์ฉ๋๋ค.
์ผ๋ฐ์ ์ผ๋ก useEffect ํ ์์์ ๋น๋๊ธฐ ์์ ์ ์ํํ ๋, ํด๋น ์์ ์ ๋ํ ์ฐธ์กฐ๋ฅผ ํด๋ก์ ๋ ์ปดํฌ๋ํธ์ ์ํ์ ์ ์ฅํ๋ค. ๊ทธ๋ฌ๋ฉด ๋น๋๊ธฐ ์์ ์ด ์๋ฃ๋ ํ์ ์ปดํฌ๋ํธ๊ฐ ์ธ๋ง์ดํธ๋์๋์ง ํ์ธํ๊ณ , ์ธ๋ง์ดํธ๋์๋ค๋ฉด ์์ ์ ์ค์งํ๊ฑฐ๋ ์ ๋ฆฌํ ์ ์๋ค.
์๋ฅผ ๋ค์ด, useEffect ๋ด์์ setInterval์ ์ฌ์ฉํ์ฌ ์ผ์ ์๊ฐ๋ง๋ค ์ํ๋ฅผ ์ ๋ฐ์ดํธํ๋ ์์ ์ ์ํํ ๋, ์ปดํฌ๋ํธ๊ฐ ์ธ๋ง์ดํธ๋๋ฉด ํด๋น setInterval์ ํด๋ฆฌ์ด(clear)ํด์ผ ํ๋ค.
ํด๋ฆฐ์ ํจ์๋ useEffect ํ ์ ๋ฐํ ๊ฐ์ผ๋ก ์ ์๋๋ฉฐ, useEffect ๋ด์์ ํด๋ฆฐ์ ํจ์๋ฅผ ๋ฐํํ๋ฉด ํด๋น ํจ์๋ ์ปดํฌ๋ํธ๊ฐ ๋ง์ดํธ ํด์ ๋ ๋ ํธ์ถ๋๋ฉฐ, ํด๋ฆฐ์ ํจ์๊ฐ ํธ์ถ๋๋ฉด ์ด์ ์ ์ค์ ํ ๋ชจ๋ ์์ ์ ์ ๋ฆฌํ ์ ์๋ค.
์๋ฅผ ๋ค์ด, useEffect ๋ด์์ ๊ตฌ๋ ์ ์ค์ ํ ๊ฒฝ์ฐ, ํด๋ฆฐ์ ํจ์์์ ํด๋น ๊ตฌ๋ ์ ํด์งํ ์ ์๋ค. ์ด๊ฒ์ ๋ฉ๋ชจ๋ฆฌ ๋์๋ฅผ ๋ฐฉ์งํ๊ณ , ์ปดํฌ๋ํธ๊ฐ ๋ง์ดํธ ํด์ ๋ ๋ ๋ถํ์ํ ์์ ์ด๋ ๊ตฌ๋ ์ด ๋จ์ง ์๋๋ก ํ๋ค.
์ ๋ฆฌ > useEffect ๋ด์์ setInterval์ ์ฌ์ฉํ์ฌ ์ผ์ ์๊ฐ๋ง๋ค ์ํ๋ฅผ ์ ๋ฐ์ดํธํ๋ ์์ ์ ์ํํ ๋,
์ปดํฌ๋ํธ๊ฐ ์ธ๋ง์ดํธ๋๋ฉด ํด๋น setInterval์ ํด๋ฆฌ์ด ํด์ผํ๋ ๊ฒ๊ณผ ๊ฐ์ ๋งฅ๋ฝ์ด๋ค.