๊ฐœ๋ฐœ/โŒ ์˜ค๋ฅ˜ ๋…ธํŠธ

[React] 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.

๋ฐ(Ming) ๐Ÿˆโ€โฌ› 2022. 2. 17. 22:06
728x90
๋ฐ˜์‘ํ˜•


โŒ 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์˜ cleanup ํ•จ์ˆ˜๋ฅผ ์ด์šฉํ•ด๋ผ

 

react๋กœ ์ž‘์—…์„ ํ•˜๋‹ค๋ณด๋ฉด ์ข…์ข… ๋งŒ๋‚˜๋Š” ์—๋Ÿฌ ์ค‘ ํ•˜๋‚˜์ž…๋‹ˆ๋‹ค.
์ด ์—๋Ÿฌ๋Š” fetch ๋“ฑ ๋น„๋™๊ธฐ๋ฅผ ์‹คํ–‰ํ•˜๋Š” ์‹คํ–‰ context๊ฐ€ ์™„๋ฃŒ ๋˜๊ธฐ ์ „์— ์ปดํฌ๋„ŒํŠธ๊ฐ€ unmount๊ฐ€ ๋œ ํ›„ setState๊ฐ€ ์‹คํ–‰์ด ๋  ๋•Œ ๋ฐœ์ƒํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ์ด๋Ÿด ๋•Œ ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์€?!

 

๐Ÿ“Œ mount, unmount๋ฅผ ํ•ด์ฃผ๋Š” ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค.

๋ณ€์ˆ˜๋กœ mount๋ฅผ false๋กœ ์„ ์–ธํ•ด์ฃผ๊ณ  ๋น„๋™๊ธฐ ์ปจํ…์ŠคํŠธ๋ฅผ ์‹คํ–‰ํ•˜๊ธฐ ์ „์— true๊ฐ’์œผ๋กœ ๋ณ€๊ฒฝ ๋์— ๋‹ค์‹œ false๋กœ ๋ณ€๊ฒฝํ•ด์ฃผ๋ฉด ํ•ด๊ฒฐ๋ฉ๋‹ˆ๋‹ค. ์ €๋Š” useState๋กœ ๊ด€๋ฆฌํ•ด์คฌ์Šต๋‹ˆ๋‹ค.

 

const [mount, setMount] = useState(false)

useEffect(() => { ...
try{
  setMount(true)
}catch(err){
}

setMount(false)

//or Cleanupํ•จ์ˆ˜์‹์œผ๋กœ ์ฒ˜๋ฆฌํ•ด๋„ ๋ฉ๋‹ˆ๋‹ค!

},[]}

 

 

 

728x90