westagram project ์ค‘ react๋กœ ๋Œ“๊ธ€ ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•  ๋•Œ map()๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ตฌํ˜„ํ•˜๊ฒŒ ๋˜์—ˆ๋Š”๋ฐ, ์‹คํ–‰์‹œ์ผœ ๋ณด๋‹ˆ ์ž‘๋™ํ•˜๋Š” ๋ฐ์— ๋ฌธ์ œ๋Š” ์—†์œผ๋‚˜ ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ–ˆ๋‹ค. ์—๋Ÿฌ์˜ ๋‚ด์šฉ์€ ๊ฐ ํ•ญ๋ชฉ์— key๋ฅผ ๋„ฃ์–ด์•ผ ํ•œ๋‹ค๋Š” ๋‚ด์šฉ์“ฐโ€ฆ.๐Ÿ˜‚

์ž‘๋™์—๋Š” ๋ฌธ์ œ๊ฐ€ ์—†์œผ๋‚˜ ์„ฑ๋Šฅ์ ์œผ๋กœ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•˜๋‹ˆ.. ํ•ด๊ฒฐํ•ด์•ผ ํ–ˆ๋‹ค. ๊ทธ๋ ‡๊ฒŒ ํ•ด์„œ ์•Œ๊ฒŒ๋œ map()๊ณผ Key๐Ÿ’ก์˜ ๋‚ด์šฉ์„ ์ •๋ฆฌํ•ด๋ณธ๋‹ค.



โ—‹ Key๐Ÿ’ก

key๋Š” element list๋ฅผ ๋งŒ๋“ค ๋•Œ ํฌํ•จํ•ด์•ผ ํ•˜๋Š” ํŠน์ˆ˜ํ•œ ๋ฌธ์ž์—ด attribute

  • key๋Š” react๊ฐ€ ์–ด๋–ค ํ•ญ๋ชฉ์„ ๋ณ€๊ฒฝ, ์ถ”๊ฐ€ ๋˜๋Š” ์‚ญ์ œํ• ์ง€ ์‹๋ณ„ํ•˜๋Š” ๋ฐ์— ๋„์›€์„ ์ค€๋‹ค
  • key๋Š” element์— ์•ˆ์ •์ ์ธ ๊ณ ์œ ์„ฑ์„ ๋ถ€์—ฌํ•˜๊ธฐ ์œ„ํ•ด array ๋‚ด๋ถ€์˜ element์— ์ง€์ •ํ•ด์•ผ ํ•œ๋‹ค


๐Ÿ”˜ key๋ฅผ ์„ ํƒํ•˜๋Š” ๊ฐ€์žฅ ์ข‹์€ ๋ฐฉ๋ฒ•์€?

  • ๋ฆฌ์ŠคํŠธ์˜ ๋‹ค๋ฅธ ํ•ญ๋ชฉ๋“ค ์‚ฌ์ด์—์„œ ํ•ด๋‹น ํ•ญ๋ชฉ์„ ๊ณ ์œ ํ•˜๊ฒŒ ์‹๋ณ„ํ•  ์ˆ˜ ์žˆ๋Š” ๋ฌธ์ž์—ด์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ
  • ๋Œ€๋ถ€๋ถ„์˜ ๊ฒฝ์šฐ ๋ฐ์ดํ„ฐ์˜ ID๋ฅผ key๋กœ ์‚ฌ์šฉ
  • ๋ Œ๋”๋ง ํ•œ ํ•ญ๋ชฉ์— ๋Œ€ํ•œ ์•ˆ์ •์ ์ธ ID๊ฐ€ ์—†๋‹ค๋ฉด ์ตœํ›„์˜ ์ˆ˜๋‹จ์œผ๋กœ index๋ฅผ key๋กœ ์‚ฌ์šฉํ•  ์ˆ˜๋Š” ์žˆ์œผ๋‚˜, ํ•ญ๋ชฉ์˜ ์ˆœ์„œ๊ฐ€ ๋ฐ”๋€” ์ˆ˜ ์žˆ๋Š” ๊ฒฝ์šฐ key์— index๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์€ ์ง€์–‘!
    • โœจ์ฐธ๊ณ โœจ ๋งŒ์•ฝ ๋ฆฌ์ŠคํŠธ ํ•ญ๋ชฉ์— ๋ช…์‹œ์ ์œผ๋กœ key๋ฅผ ์ง€์ •ํ•˜์ง€ ์•Š์œผ๋ฉด React๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ ์ธ๋ฑ์Šค๋ฅผ key๋กœ ์‚ฌ์šฉํ•˜๋‹ˆ ์ฐธ๊ณ !


๐Ÿ”˜ key์ ์šฉ ๋ฐฉ๋ฒ•

  • (key๋Š” ์ฃผ๋ณ€ ๋ฐฐ์—ด์˜ context์—์„œ๋งŒ ์˜๋ฏธ๊ฐ€ ์žˆ์œผ๋ฏ€๋กœ) ๋ฐฐ์—ด ์•ˆ์— key๋ฅผ ์ง€์ •
  • Key๋Š” ํ˜•์ œ ์‚ฌ์ด์—์„œ๋งŒ ๊ณ ์œ ํ•œ ๊ฐ’์ด์–ด์•ผ ํ•œ๋‹ค
    • Key๋Š” ๋ฐฐ์—ด ์•ˆ์—์„œ ํ˜•์ œ ์‚ฌ์ด์—์„œ ๊ณ ์œ ํ•ด์•ผ ํ•˜๊ณ 
    • ์ „์ฒด ๋ฒ”์œ„์—์„œ ๊ณ ์œ ํ•  ํ•„์š”๋Š” ์—†๋‹ค
    • ๋‘ ๊ฐœ์˜ ๋‹ค๋ฅธ ๋ฐฐ์—ด์„ ๋งŒ๋“ค ๋•Œ ๋™์ผํ•œ key๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค


โ— JSX์— map() ํฌํ•จ์‹œํ‚ค๊ธฐ

  • ์‹ค์ œ ์ž‘์„ฑํ•œ ์ฝ”๋“œ์— key๋ฅผ ํฌํ•จ์‹œ์ผฐ๋‹ค
 render() {
  const { content, addComment } = this.state;
    return (
      <>
        <div className="commentList">
          {addComment.map((el, index) => {
            return <AddComment addComment={(addComment, el)} key={index} />;
          })}
        </div>



๐Ÿ’ฌ ์›๋ž˜ ์ž‘์„ฑํ–ˆ๋˜ ์ฝ”๋“œ๋Š” ์•„๋ž˜์˜€์œผ๋‚˜.. ๋ฌด์–ธ๊ฐ€ ๋ˆˆ์— ์ต์€? ๋งž๋Š”? ์ฝ”๋“œ๊ฐ€ ์•„๋‹Œ๊ฒƒ ๊ฐ™์•„ ๊ณ ๋ฏผํ•˜๋‹ค๊ฐ€ ์ˆ˜์ •ํ–ˆ๋‹คโ€ฆ.;;

  • ์›๋ž˜ ์ž‘์„ฑํ–ˆ๋˜ ์ฝ”๋“œ๋Š” ์ž์‹ component์—์„œ map() ์‚ฌ์šฉํ•˜๊ณ , key๊ฐ’์„ ์ƒ์œ„ element์— ์ ์šฉ์‹œ์ผฐ์œผ๋‚˜
  • ์ตœ์ข… ์ œ์ถœํ•œ ์ฝ”๋“œ๋Š” ๋ถ€๋ชจ component์—์„œ map() ์‚ฌ์šฉํ•˜๊ณ  key ์ ์šฉ
  • ๊ณผ์—ฐ ์ฝ”๋“œ ๋ฆฌ๋ทฐ ์‹œ ์–ด๋–ค ์ฝ”๋ฉ˜ํŠธ๊ฐ€ ๋‹ฌ๋ฆด์ง€โ€ฆ

[React_doc ๋ฆฌ์ŠคํŠธ์™€ Key] (https://ko.reactjs.org/docs/lists-and-keys.html/)