๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๐Ÿ“‚ ๊ธฐ์ˆ  ๋ฉด์ ‘/Library

useEffect์˜ dependency array์— ๋Œ€ํ•ด์„œ ์„ค๋ช…ํ•ด ์ฃผ์„ธ์š”.

by Dev. Ella 2023. 4. 10.

๐Ÿ‘ฉ๐Ÿป‍๐Ÿ’ป useEffect์˜ dependency array์— ๋Œ€ํ•ด์„œ ์„ค๋ช…ํ•ด ์ฃผ์„ธ์š”.

 

๐Ÿ’๐Ÿป‍โ™€๏ธ ์š”์•ฝํ•˜์ž๋ฉด ,

useEffect๋ž€, ์ปดํฌ๋„ŒํŠธ ๋‚ด์—์„œ ์‚ฌ์ด๋“œ ์ดํŽ™ํŠธ๋ฅผ ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•˜๋Š” ํ›…์ž…๋‹ˆ๋‹ค. useEffect๋Š” ์ฒซ ๋ฒˆ์งธ ์ธ์ž๋กœ ์ฝœ๋ฐฑํ•จ์ˆ˜๋ฅผ ๋ฐ›๊ณ , ๋‘ ๋ฒˆ์งธ ์ธ์ž๋กœ ๋ฐฐ์—ด์„ ๋ฐ›๋Š”๋ฐ, ์ด ๋ฐฐ์—ด์„ dependency array ๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค. 

 

dependency array๋ž€ ๋ฌด์—‡์ธ๊ฐ€์š”?

์ข…์†์„ฑ ๋ฐฐ์—ด์ด๋ผ ๋ถ€๋ฅด๋Š” ์ด์œ ๋Š” useEffect์˜ ์‹คํ–‰์ด ํ™”๋ฉด์— ์ฒ˜์Œ ๋ Œ๋”๋ง ๋  ๋•Œ ๊ทธ๋ฆฌ๊ณ  ์ข…์†์„ฑ ๋ฐฐ์—ด์˜ value ๊ฐ’์ด ๋ฐ”๋€” ๋•Œ๋งˆ๋‹ค ์‹คํ–‰๋˜๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ๋งŒ์•ฝ ๋นˆ ๋ฐฐ์—ด์ด ์ „๋‹ฌ๋œ๋‹ค๋ฉด ์ฒซ ๋ Œ๋”๋ง๋  ๋•Œ๋งŒ ์‹คํ–‰๋ฉ๋‹ˆ๋‹ค. 

 

useEffect์— dependency array๋ฅผ ์ฃผ์ง€ ์•Š์œผ๋ฉด, 

์ƒํƒœ๊ฐ€ ๋ณ€๊ฒฝ๋  ๋•Œ๋งˆ๋‹ค ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ฆฌ๋ Œ๋”๋ง์ด ๋ฉ๋‹ˆ๋‹ค. ๊ฐ„๋‹จํ•œ local state๊ฐ€ ๊ณ„์† ๋ณ€๊ฒฝ๋  ๋•Œ๋งˆ๋‹ค ์ƒˆ๋กญ๊ฒŒ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ฆฌ๋ Œ๋”๋ง ๋œ๋‹ค๋ฉด, ์ด๋Š” ์„ฑ๋Šฅ์— ์•…์˜ํ–ฅ์„ ๋ฏธ์นฉ๋‹ˆ๋‹ค.

 

 

๐Ÿ“Ž ๋‚ด์šฉ ์ฐธ์กฐ

- Blog: React Hooks (useEffect)

- velog: [React] useEffect์˜ dependency array

๋Œ“๊ธ€