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๊ฐ์ผ๋ก ์ฌ์ฉ ํ๋ ๊ฒ์ ๋ฐ๋์งํ์ง ์๋ค.!
์ด์ ์์์ผ๋๊น ๋ฉด์ ๋ค์๋ณด๊ฒํด์ฃผ์ธ์... ์๋ฒฝํ๊ฒ ๋๋ตํ ์ ์์ด์ใ ใ ใ ใ ใ ใ ใ ใ ใ