๋ฐ˜์‘ํ˜•

๐Ÿฐ Minified React error #426


๋Š” ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋งˆ์šดํŠธ๋˜๊ธฐ ์ „์— ๋น„๋™๊ธฐ ์ž‘์—…์ด ์™„๋ฃŒ๋˜์–ด ํ•ด๋‹น ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์–ธ๋งˆ์šดํŠธ(unmounted)๋œ ํ›„์—๋„ ์ƒํƒœ(state)๋ฅผ ์—…๋ฐ์ดํŠธํ•˜๋ ค๊ณ  ํ•  ๋•Œ ๋ฐœ์ƒ


๐Ÿช ํ•ด๊ฒฐ์ฑ… 


1. ์ปดํฌ๋„ŒํŠธ ๋งˆ์šดํŠธ ์ „์— ๋น„๋™๊ธฐ ์ž‘์—…์ด ์™„๋ฃŒ๋˜๋„๋ก ํ•˜์ž
์ด ๊ฒฝ์šฐ componentDidMount ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜๊ฑฐ๋‚˜, React Hook์˜ useEffect ํ›…์„ ์‚ฌ์šฉํ•˜์—ฌ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋งˆ์šดํŠธ๋˜๋ฉด ๋น„๋™๊ธฐ ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•˜๋„๋ก ํ•˜์ž

2. ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋งˆ์šดํŠธ๋˜์ง€ ์•Š์€ ๊ฒฝ์šฐ ์ƒํƒœ ์—…๋ฐ์ดํŠธ๋ฅผ ๋ฐฉ์ง€ํ•˜๊ธฐ ์œ„ํ•ด isMounted ๋ณ€์ˆ˜๋ฅผ ์‚ฌ์šฉ
์ด ๋ฐฉ๋ฒ•์€ ๊ณต์‹์ ์œผ๋กœ ๊ถŒ์žฅ๋˜์ง€ ์•Š์ง€๋งŒ, ์ผ๋ถ€ ์ƒํ™ฉ์—์„œ๋Š” ์œ ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

 

๐Ÿฐ Minified React error #310


"Element type is invalid" ์˜ค๋ฅ˜๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ๊ฒƒ, ์ปดํฌ๋„ŒํŠธ์˜ ์ด๋ฆ„์ด๋‚˜, ๋ฆฌ์•กํŠธ ์—˜๋ฆฌ๋จผํŠธ๊ฐ€ ์ž˜๋ชป๋˜์—ˆ์„ ๋•Œ ๋ฐœ์ƒ

1. ๋ฆฌ์•กํŠธ ์—˜๋ฆฌ๋จผํŠธ๊ฐ€ ์œ ํšจํ•˜์ง€ ์•Š์€ ๊ฒฝ์šฐ (์˜ˆ : null ๋˜๋Š” undefined)
2. ์ปดํฌ๋„ŒํŠธ์˜ ์ด๋ฆ„์ด ์œ ํšจํ•˜์ง€ ์•Š๊ฑฐ๋‚˜, ์†Œ๋ฌธ์ž๋กœ ์ž‘์„ฑ๋˜์–ด ์žˆ์ง€ ์•Š์€ ๊ฒฝ์šฐ
3. ์ปดํฌ๋„ŒํŠธ๋ฅผ import ํ•˜์ง€ ์•Š์€ ๊ฒฝ์šฐ

๐Ÿช ํ•ด๊ฒฐ์ฑ…

1. ์˜ฌ๋ฐ”๋ฅธ ๋ฆฌ์•กํŠธ ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ์‚ฌ์šฉ
- ํ•ด๋‹น ์—˜๋ฆฌ๋จผํŠธ๊ฐ€ ์œ ํšจํ•œ์ง€ ํ™•์ธ ๋ฐ ํ•„์š”ํ•œ ๊ฒฝ์šฐ ์ˆ˜์ •

2. ์ปดํฌ๋„ŒํŠธ์˜ ์ด๋ฆ„์ด๋‚˜ ์ž‘์„ฑ ๋ฐฉ์‹์„ ์ˆ˜์ •
- ์ปดํฌ๋„ŒํŠธ ์ด๋ฆ„์„ ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ์ž‘์„ฑํ•˜๊ฑฐ๋‚˜, import ๋ฌธ์„ ์ถ”๊ฐ€ํ•˜์—ฌ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ๋ณ€๊ฒฝ

๋ฐ˜์‘ํ˜•