React 에서 key 가 중요한 이유는? 그냥 index 를 쓰면 왜 안될까?

안녕하세요. 코딩앙마 입니다 :)
이번 시간에는 React 에서 key 가 필요한 이유와, 단순히 index 를 쓰는것이 왜 안좋은지, 그리고 어떤 값을 key 로 사용하는게 좋은지 한번 알아보겠습니다.
#React #리액트 #key #index

[@junecnol79]

jest 관련 튜토리얼 영상을 여러개 보았지만 코딩앙마 님의 플레이리스트가 최고였습니다
고맙습니다

[@monkeyToGorilla00]

내용이 정말 좋았습니다. 감사합니다.

[@goodjob4267]

그냥 uuid 넣어주거나 nanoid 를 사용하는 방법은 어떻게 생각하시나요. 분명 간편하지만, key값을 설정해줘야하는 근본 원인과는 차이가 있을 것 같아서요 (예측할수 없는 key값에 대해)

[@이상현-o7p9y]

진짜 너무 유익하세요... 최곱니다

[@caloriecoin_ceo7847]

코딩천사다~

[@이푸샤]

해당 오류로 몇일 고생해서 해결했는데, 미리 해당 봤으면 더 좋았을텐데 , 유용한 영상 감사합니다 😃

[@syunmatsunaga9382]

잘봤습니다. 진짜 질이 좋네요

[@scrumptious1177]

인덱스를 키로 이용하면 하나만 바꾸어도 인덱스에 해당하는 값이 다 바뀌니까 전체를 렌더링해버리는거군요
감사합니다!!

[@chu926-g6q]

안녕하세요. 코딩앙마님! 한가지 질문이 있습니다!
배열.map 으로 리스트를 반복으로 생성할 경우 필수로 key값을 넣어줘야 하는데, 배열.map안에서 조건 연산자를(삼항연산자) 통해 렌더링을 하려고 합니다.
이 때, A조건과 B조건이 있는데 둘다 key={item.id} 를 준다고 하는 가정하면, key uniqe 에러가 발생하더라구요.
map 내부에서 조건부 렌더링은 안좋은 설계일까요?
또한 A조건에서 렌더링되는 컴포넌트는 key={item.number} B조건에서 렌더링되는 컴포넌트는 key={item.id}를 줘도 에러가 발생하더라구요 ㅜ

[@codingangma]

음.. 그럴리가 없는데, 어떤 코드인지 볼 수 있나요?
codesandbox.io/s/react-playground-forked-26989?from-embed=&file=/Hello.js
예시로 만들어 봤는데 참고해주세요.

[@chu926-g6q]

@@codingangma 답글주셔서 감사드립니다! 정확한 질문은 이렇습니다 ㅜ 확인해주시면 감사하겠습니다 ㅜ!
codesandbox.io/s/busy-worker-4n9ms?file=/src/App.js

[@codingangma]

이렇게 해보세요. 최상위 부모가 키를 가지도록

[@chu926-g6q]

@@codingangma 헉... 이런 방법이 있군요... ㅜ 주말에 답변까지.. 너무 감사드립니다ㅜ😂 항상 잘 챙겨보고 있습니다! 감사힙니다!

[@leedaniel7748]

좋은강의 잘보겠습니다 :)

[@김인태-r8k]

감사합니다

[@이민욱-m1x]

코딩님 헷깔리는게 있습니다. 리액트는 상태가 추가되어서 재 랜더링이 발생 시 이전 상태의 key와 현재 상태의 key가 동일하다면 재 랜더링을 안하고 새로 추가된 key만 새로 랜더링 해주는건가요??(key는 id값으로 고유하다)

[@codingangma]

key가 동일해도 내용이 바뀌면 다시 렌더링 됩니다. 다만 그 요소가 같다는걸 아는거죠.
만약 key와 내용 모두 안 바뀌었다면 렌더링 안합니다.

[@이민욱-m1x]

@@codingangma
답변 감사합니다. 테스트를 하면서 추가된 user Object를 배열 맨 뒤에 넣어줬다면 앞에 1,2,3 key id와 user 참조 값은 동일하고 새로 추가된 4만 랜더링이 되어야 될 탠데 1,2,3도 재 랜더링이 되어버립니다.
동영상에서는 안 썼지만 React.memo를 User컴포넌트에 쓰면 key와 user참조 값이 동일해서 앞에 1,2,3은 재 랜더링이 안되었고 뒤에 추가된 4만 랜더링이 되었습니다.
추가 된 요소만 새로 랜더링하고 나머지는 재 랜더링을 방지하고 싶다면 memo를 무조건 써야되는 가능한 부분일까요??
{userList.map((user) => (

))}

등록
function push() {
setUserList((prev) => {
return [
...prev,
{
id: prev.length + 1,
name: input.current.value,
},
];
});
}

[@codingangma]

@@이민욱-m1x 음.. 일단 setXXX 를 통해 어떤 값이 변경되면 그 컴포넌트는 (전체) 렌더링을 다시 하게 됩니다.
위 댓글의 경우 부모 컴포넌트가 다시 렌더링 되더라도, 동일한 값을 받는 User 컴포넌트의 불필요한 렌더링을 막기 위해선 memo 를 쓰는게 좋겠네요.