TIL-30 React key props πŸ—

PRBΒ·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개의 λŒ“κΈ€