๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

State

(1)
React key prop๊ณผ ์ƒํƒœ ์ดˆ๊ธฐํ™” React์—์„œ key prop์€ ๋ฆฌ์ŠคํŠธ๋‚˜ iterable ๊ฐ์ฒด ๋ Œ๋”๋ง ์‹œ ์ค‘์š”ํ•œ ์—ญํ• ์„ ํ•˜์ง€๋งŒ, ์ƒํƒœ(state) ๊ด€๋ฆฌ์—๋„ ์˜ํ–ฅ์„ ๋ฏธ์น  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.key์˜ ์—ญํ• React์—์„œ key๋Š” ๊ฐ ์ปดํฌ๋„ŒํŠธ์˜ ๊ณ ์œ ์„ฑ์„ ๋ณด์žฅํ•˜์—ฌ ๋ณ€๊ฒฝ ์‚ฌํ•ญ์„ ํšจ์œจ์ ์œผ๋กœ ๊ฐ์ง€ํ•˜๊ณ  ์—…๋ฐ์ดํŠธํ•˜๋Š” ์—ญํ• ์„ ํ•ฉ๋‹ˆ๋‹ค.๋ฆฌ์ŠคํŠธ๋ฅผ ๋ Œ๋”๋งํ•  ๋•Œ key๊ฐ€ ๋ณ€๊ฒฝ๋˜์ง€ ์•Š์œผ๋ฉด ๊ธฐ์กด์˜ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์œ ์ง€๋˜๋ฉฐ, ๋ณ€๊ฒฝ๋˜๋ฉด ํ•ด๋‹น ์ปดํฌ๋„ŒํŠธ๋Š” ์ƒˆ๋กœ์šด ๊ฒƒ์œผ๋กœ ์ธ์‹๋ฉ๋‹ˆ๋‹ค.key๊ฐ€ state์— ๋ฏธ์น˜๋Š” ์˜ํ–ฅkey๊ฐ€ ๋ณ€๊ฒฝ๋˜๋ฉด React๋Š” ๊ธฐ์กด ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ œ๊ฑฐํ•˜๊ณ  ์ƒˆ๋กœ์šด ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค.์ฆ‰, key ๊ฐ’์ด ๋ฐ”๋€Œ๋ฉด ํ•ด๋‹น ์ปดํฌ๋„ŒํŠธ์˜ ์ƒํƒœ๊ฐ€ ์ดˆ๊ธฐํ™”๋ฉ๋‹ˆ๋‹ค.์ด๋Š” ๊ฐ™์€ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์—ฌ๋Ÿฌ ๊ฐœ ์‚ฌ์šฉํ•˜๋ฉด์„œ ๊ฐœ๋ณ„์ ์œผ๋กœ ์ƒํƒœ๋ฅผ ์œ ์ง€ํ•˜๊ณ  ์‹ถ์„ ๋•Œ ์œ ์šฉํ•˜๊ฒŒ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.import { useStat..