TIL-30 React key props ๐Ÿ—

ssxst31ยท2021๋…„ 8์›” 23์ผ
0

React

๋ชฉ๋ก ๋ณด๊ธฐ
4/22
post-thumbnail

key ๐Ÿ—

๋ฐฐ์—ด์„ ๋ฐ›์•„์„œ ์ถœ๋ ฅํ•˜๋Š” ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ž‘์„ฑ ํ›„ ์‹คํ–‰ํ•˜๋ฉด key ๊ฐ’์ด ํ•„์š”ํ•˜๋‹ค๋Š” ๊ฒฝ๊ณ ๊ฐ€ ํ‘œ์‹œ๋œ๋‹ค. ์—ฌ๊ธฐ ๋งํ•˜๋Š” key๋ž€ ๋ฌด์—‡์ผ๊นŒ?

๋ฐฐ์—ด์—์„œ key๊ฐ€ ํ•„์š”ํ•œ ์ด์œ 

Key๋Š” React๊ฐ€ ์–ด๋–ค ํ•ญ๋ชฉ์„ ๋ณ€๊ฒฝ, ์ถ”๊ฐ€ ๋˜๋Š” ์‚ญ์ œํ• ์ง€ ์‹๋ณ„ํ•˜๋Š” ๊ฒƒ์„ ๋•์Šต๋‹ˆ๋‹ค. key๋Š” ์—˜๋ฆฌ๋จผํŠธ์— ์•ˆ์ •์ ์ธ ๊ณ ์œ ์„ฑ์„ ๋ถ€์—ฌํ•˜๊ธฐ ์œ„ํ•ด ๋ฐฐ์—ด ๋‚ด๋ถ€์˜ ์—˜๋ฆฌ๋จผํŠธ์— ์ง€์ •ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

๋ผ๊ณ  ๋ฆฌ์•กํŠธ ๊ณต์‹๋ฌธ์„œ์— ์ ํ˜€์žˆ๋‹ค.

๋ฆฌ์•กํŠธ๋Š” state์—์„œ ๋ณ€๊ฒฝ์‚ฌํ•ญ์ด ์žˆ๋Š” ๋ถ€๋ถ„๋งŒ ์บ์น˜ํ•ด์„œ ๋ Œ๋”๋ง ํ•ด์ค€๋‹ค
์ด๋ ‡๊ฒŒ ๋˜๋ฉด ๋ณ€๊ฒฝ๋˜์ง€ ์•Š๋Š” ๋ฐ์ดํ„ฐ๋“ค์— ๋Œ€ํ•ด์„œ ์—…๋ฐ์ดํŠธ๋ฅผ ํ•˜์ง€ ์•Š์•„ ํšจ์œจ์ ์œผ๋กœ ์ž‘๋™์‹œํ‚ฌ ์ˆ˜ ์žˆ๋‹ค.
๊ทธ๋Ÿฌ๋ฉด ๋ฆฌ์•กํŠธ๋Š” ๋ฐฐ์—ด ์ „์ฒด๋ฅผ ๋‹ค์‹œ ๋ Œ๋”๋ง ํ• ๊นŒ or ์ถ”๊ฐ€๋œ ์š”์†Œ๋งŒ ๋‹ค์‹œ ๋ Œ๋”๋ง ํ• ๊นŒ ๋ฆฌ์•กํŠผ๋Š ์ถ”๊ฐ€๋œ ์š”์†Œ๋งŒ ๋ Œ๋”๋ง ํ•ด์ค€๋‹ค. ๊ทธ๊ฑธ ๊ตฌ๋ณ„ํ•˜๊ธฐ ์œ„ํ•ด์„œ ํ•„์š”ํ•œ ๊ฒŒ ๋ฐ”๋กœ key์ด๋‹ค

Index๋กœ ํ‚ค๊ฐ’์„ ์‚ฌ์šฉํ•˜๋ฉด ์•ˆ๋˜๋Š” ์ด์œ 

{this.props.list.map((el, id) => {
          return (
            <div key={id} className="comment">
              <div>
                <strong>code_bootcamp</strong>
                <Comment value={el} />
              </div>
              <div>
                <i className="fas fa-times" id="commentOut" />
                <i className="far fa-heart" />
              </div>
            </div>
          );
        })}

์ €๋ฒˆ์— ๋งŒ๋“  ๋ฐ”๋‹๋ผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ๋งŒ๋“  ์ธ์Šคํƒ€๊ทธ๋žจ์„ ๋ฆฌ์•กํŠธ๋กœ ๋ณ€ํ™˜์‹œํ‚ค๋ฉด์„œ
ํ”ผ๋“œ์˜ ๋Œ“๊ธ€ ๋ฆฌ์ŠคํŠธ๋ฅผ map()๋กœ ๊ตฌํ˜„ํ–ˆ๋‹ค.
์ฒ˜์Œ์— ๋งŒ๋“ค ๋•Œ ๊ณต์‹ ๋ฌธ์„œ์— ์ตœํ›„์˜ ์ˆ˜๋‹จ์œผ๋กœ index ๊ฐ’์„ ์ค˜๋„ ๋œ๋‹ค๊ณ ??
ํ•˜๋ฉด์„œ ๊ทธ๋ƒฅ index๋ฅผ ๋ถ€์—ฌํ–ˆ๋Š”๋ฐ ์ถ”๊ฐ€ํ•  ๋•Œ๋Š” ๋‹น์—ฐํžˆ ๋ฌธ์ œ๋Š” ์—†๋‹ค.
๋ฐ”๋กœ ๋Œ“๊ธ€ ์‚ญ์ œ ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•˜๋ ค๋‹ˆ ๋ฌธ์ œ๊ฐ€ ์ƒ๊ฒผ๋‹ค. ๊ทธ๋ž˜์„œ ์ฐพ์•„๋ณด๋‹ˆ
์ฒ˜์Œ, ์ค‘๊ฐ„์— ๋ฐ์ดํ„ฐ๋ฅผ ์ถ”๊ฐ€ํ•˜๊ฑฐ๋‚˜ ์‚ญ์ œ๋ฅผ ํ•  ๊ฒฝ์šฐ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•œ๋‹ค๊ณ  ํ•œ๋‹ค.

๋” ์ข‹์€ ๋‹ค๋ฅธ ๋ฐฉ๋ฒ•

๋ฌธ์ž์—ด ์‚ฌ์šฉ

toString()๊ณผ ๊ฐ™์ด ๋ฌธ์ž์—ด๋กœ ํ‚ค๊ฐ’์„ ๋ถ€์—ฌํ•˜๋Š” ๋ฐฉ๋ฒ•

ID๊ฐ’ ์‚ฌ์šฉ

๋Œ€๋ถ€๋ถ„ Data์˜ ๊ฐ์ฒด์—์„œ .id ๋กœ ์ถ”์ถœํ•˜์—ฌ ์‚ฌ์šฉํ•œ๋‹ค.

์นด์šดํŠธ

 this.state = {
      commentCounter: 0,
      }
  const addComment = () => ({
        id: this.state.commentCounter++,

์ด๋Ÿฐ ์‹์œผ๋กœ addComment ํ˜ธ์ถœํ•  ๋•Œ๋งˆ๋‹ค ์นด์šดํŠธ๊ฐ€ 1์”ฉ ์ฆ๊ฐ€ํ•˜์—ฌ ๊ณ ์œ ํ•œ ํ‚ค๊ฐ’์„ ์ค„ ์ˆ˜๋„ ์žˆ๋‹ค.

์ฐธ๊ณ ์‚ฌ์ดํŠธhttps://wooooooak.github.io/frontend/2019/01/30/%EB%A6%AC%EC%95%A1%ED%8A%B8%EB%B0%B0%EC%97%B4%EB%B3%80%EA%B2%BD/
https://ko.reactjs.org/docs/lists-and-keys.html

profile
์‚ฌ์šฉ์ž ์ž…์žฅ์—์„œ ์‚ฌ์šฉ์ž๊ฐ€ ์›ํ•˜๋Š” ๊ฒƒ์„ ๊ฐœ๋ฐœํ•˜๋Š” ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž์ž…๋‹ˆ๋‹ค.

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