Arr.map ๊ณผ key๐Ÿ”‘

dev.horang๐Ÿฏยท2024๋…„ 5์›” 27์ผ
1
post-thumbnail

Warning : Each Child in a list should have a unique "key" prop.

ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋ผ๋ฉด ๋ˆ„๊ตฌ๋‚˜ ํ•œ๋ฒˆ์”ฉ์€ ๋ณด๋Š” ์ฝ˜์†”์˜ ๋นจ๊ฐ„ ์—๋Ÿฌ... ์ฒ˜์Œ์—๋Š” ์ฝ˜์†”์— ๋นจ๊ฐ„ ๊ธ€์”จ๋งŒ ๋ณด์—ฌ๋„ ์ˆ˜์ •ํ• ๋ ค๊ณ  ์• ๋ฅผ ์“ฐ๋˜ ๋‚ด๊ฐ€ ์–ด๋Š์ˆœ๊ฐ„ ์—†์–ด๋„ ๋Œ์•„ ๊ฐ„๋‹ค ๋ผ๋Š” ์˜ค๋งŒํ•˜๊ณ  ๋„๋ผ์ด ๊ฐ™์€ ์ƒ๊ฐ์— ์•ˆ์ฃผ๋˜์–ด ํ•ด๋‹น ์—๋Ÿฌ๋ฅผ ๋ฌด์‹œํ•œ์ง€ ์˜ค๋ž˜๋˜์—ˆ๋‹ค. ๊ทธ๋Ÿฐ๋ฐ ๋ฉฐ์น ์ „... ์˜ค๋žซ๋งŒ์˜ ๊ธฐ์ˆ ๋ฉด์ ‘์—

key๊ฐ’์„ index๋กœ ์ฃผ์…จ๋Š”๋ฐ ์™œ index ๊ฐ’์œผ๋กœ ์ฃผ์…จ๋Š”์ง€ DOM์˜ ๊ฐœ๋…๊ณผ ํ•จ๊ป˜ ์„ค๋ช…ํ•ด ์ฃผ์‹ค ์ˆ˜ ์žˆ์„๊นŒ์š”?

๋ผ๋Š” ์งˆ๋ฌธ์— ๋จธ๋ฆฌ๊ฐ€ ๋ตํ•ด์ ธ์„œ ๋Œ€๋‹ต์„ ์ ˆ๊ณ  ๋‚œ ํ›„์— ์„œ์นญ์„ ํ•ด๋ณด๊ธฐ ์‹œ์ž‘ํ–ˆ๋‹ค.

๊ณต์‹๋ฌธ์„œ

๋ฆฌ์•กํŠธ ๊ณต์‹๋ฌธ์„œ ์„ค๋ช…

ํ‚ค๋Š” ๊ฐ ๋ฐฐ์—ด ํ•ญ๋ชฉ์ด ์–ด๋–ค ์ปดํฌ๋„ŒํŠธ์— ํ•ด๋‹นํ•˜๋Š”์ง€๋ฅผ React์—๊ฒŒ ์•Œ๋ ค์ค๋‹ˆ๋‹ค. ์ด๋ ‡๊ฒŒ ํ•˜๋ฉด React๊ฐ€ ๋‚˜์ค‘์— ์ด๋ฅผ ๋งž์ถฐ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋Š” ๋ฐฐ์—ด ํ•ญ๋ชฉ์ด ์ด๋™ํ•˜๊ฑฐ๋‚˜(์˜ˆ: ์ •๋ ฌ ๋•Œ๋ฌธ์—), ์‚ฝ์ž…๋˜๊ฑฐ๋‚˜, ์‚ญ์ œ๋  ์ˆ˜ ์žˆ๋Š” ๊ฒฝ์šฐ ์ค‘์š”ํ•ด์ง‘๋‹ˆ๋‹ค. ์ž˜ ์„ ํƒ๋œ ํ‚ค๋Š” React๊ฐ€ ์ •ํ™•ํžˆ ๋ฌด์Šจ ์ผ์ด ์ผ์–ด๋‚ฌ๋Š”์ง€๋ฅผ ์ถ”๋ก ํ•˜๊ณ , DOM ํŠธ๋ฆฌ์— ์˜ฌ๋ฐ”๋ฅธ ์—…๋ฐ์ดํŠธ๋ฅผ ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋„์™€์ค๋‹ˆ๋‹ค.

ํ•ด๋‹น ์„ค๋ช…์„ ์‰ฝ๊ฒŒ ํ’€์–ด๋ณด๋ฉด key์˜ ์—ญํ• ์€ ๋ฐฐ์—ด์˜ ์ •๋ ฌ, ์‚ฝ์ž…, ์‚ญ์ œ, ์—…๋ฐ์ดํŠธ๋“ฑ์˜ ์ผ์„ ์ˆ˜ํ–‰ํ•  ๋•Œ React๊ฐ€ ์ด๋Ÿฌํ•œ ๋ณ€๊ฒฝ ์‚ฌํ•ญ์„ ์ •ํ™•ํ•˜๊ฒŒ ์ถ”๋ก ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•˜์—ฌ, ํšจ์œจ์ ์ด๊ณ  ์˜ฌ๋ฐ”๋ฅด๊ฒŒ DOM ์—…๋ฐ์ดํŠธ๋ฅผ ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ค€๋‹ค๊ณ  ๋‚˜์™€์žˆ๋Š”๊ฒƒ์„ ํ™•์ธ ํ•  ์ˆ˜ ์žˆ๋‹ค.

ํ•˜์ง€๋งŒ ์ด ๋•Œ map ๋ฉ”์˜๋“œ์ž์ฒด์— ์žˆ๋Š” index ๊ฐ’์„ ํ‚ค๋กœ ์ง€์ •ํ•˜๋Š”๊ฒƒ์ด ์˜ณ์€๊ฐ€? ํ•˜๋ฉด ๊ทธ๊ฑด ๋˜ ๋ฆฌ์•กํŠธ์—์„œ key ๊ฐ’์„ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ ์— ๋ฐ˜ํ•˜๋Š” ์ผ์ด ๋œ๋‹ค.
์ด์œ ๋Š” ๊ฐ„๋‹จํ•˜๋‹ค. React๊ฐ€ ๋ณ€๊ฒฝ ์‚ฌํ•ญ์„ ์ •ํ™•ํ•˜๊ฒŒ ์ถ”๋ก ํ•˜์ง€ ๋ชปํ•˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค!

๋งŒ์•ฝ ์‚ฝ์ž…, ์‚ญ์ œ๋“ฑ์˜ ๋™์ž‘์ด ๋ฐœ์ƒํ–ˆ๋‹ค๊ณ  ์ƒ๊ฐํ•ด๋ณด์ž. mapํ•จ์ˆ˜ ์ž์ฒด์˜ index๋ฅผ ๋„ฃ์€ ๊ฒฝ์šฐ arr์˜ ๊ธธ์ด๊ฐ€ ๋ณ€๊ฒฝ๋˜๋ฉด ๋ฐ์ดํ„ฐ์˜ index ๊ฐ’ ๋˜ํ•œ ๋ณ€ํ™”ํ•˜๊ฒŒ ๋˜๊ณ  ๋ชจ๋“  item ๋“ค์€ ์ƒˆ๋กœ์šด index ๊ฐ’์„ ๋ถ€์—ฌ๋ฐ›๊ฒŒ ๋  ๊ฒƒ์ด๋‹ค. ๊ทธ๋ ‡๊ฒŒ ๋˜๋ฉด arr ๋‚ด์˜ ๋ชจ๋“  ๊ฐ’๋“ค์ด ์ƒˆ๋กœ์šด key๊ฐ’์„ ๋ถ€์—ฌ๋ฐ›์•„ ๋ชจ๋‘ ์ƒˆ๋กœ์šด ํ•ญ๋ชฉ์œผ๋กœ ๋ณด์ผ๊ฒƒ์ด๊ณ  ๊ทธ๋Ÿผ ๋ชจ๋“  ๊ฐ’๋“ค์ด ์ƒˆ๋กœ ๋žœ๋”๋ง์ด ๋˜๊ฒŒ ๋œ๋‹ค. ํ•˜์ง€๋งŒ ๋งŒ์•ฝ ํ•ญ๋ชฉ ๊ณ ์œ ์˜ ๊ฐ’์„ ๋ถ€์—ฌํ•˜๊ฒŒ ๋œ๋‹ค๋ฉด ์‚ฝ์ž…, ์‚ญ์ œ๋“ฑ์˜ ๋™์ž‘์ด ๋ฐœ์ƒํ•˜๋”๋ผ๋„ ๊ธฐ์กด์˜(๋ณ€๊ฒฝ๋˜์ง€ ์•Š์€) ๋ฐ์ดํ„ฐ๋Š” ์ƒˆ๋กœ ๋žœ๋”๋ง ๋˜์ง€ ์•Š๋Š”๋‹ค.

์ •๋ฆฌํ•ด๋ณด์ž๋ฉด

key๊ฐ’์€ ํ•ด๋‹น ์•„์ดํ…œ์„ ๋‚˜ํƒ€๋‚ด๋Š” ๊ณ ์œ ๊ฐ’์ด๋ฉฐ ๋ฐฐ์—ด์˜ ๋ณ€๊ฒฝ(์‚ฝ์ž…, ์‚ญ์ œ ๋“ฑ) ์‹œ ์–ด๋–ค ๊ฐ’์ด ๋ณ€๊ฒฝ๋˜์—ˆ๋Š”์ง€ React๊ฐ€ ์ถ”๋ก ํ•  ์ˆ˜ ์žˆ๋Š” ํ‚ค์ด๋‹ค. ๊ทธ๋Ÿฌ๋ฏ€๋กœ! map ํ•จ์ˆ˜์˜ index๋ฅผ key๊ฐ’์œผ๋กœ ์‚ฌ์šฉ ํ•˜๋Š” ๊ฒƒ์€ ๋ฐ”๋žŒ์งํ•˜์ง€ ์•Š๋‹ค.!

์ด์ œ ์•Œ์•˜์œผ๋‹ˆ๊นŒ ๋ฉด์ ‘ ๋‹ค์‹œ๋ณด๊ฒŒํ•ด์ฃผ์„ธ์š”... ์™„๋ฒฝํ•˜๊ฒŒ ๋Œ€๋‹ตํ•  ์ˆ˜ ์žˆ์–ด์š”ใ… ใ… ใ… ใ… ใ… ใ… ใ… ใ… ใ… 

profile
์ข‹์•„ํ•˜๋Š”๊ฑธ ๋ฐฐ์šฐ๋Š”๊ฑด ์‹ ๋‚˜๐ŸŽต

0๊ฐœ์˜ ๋Œ“๊ธ€