질문이요

Question

배열에 jsx 값을 쓰면 키값을 주라고 하셨는데, 1. 키값을 안 주면 뭐가 안 좋죠?? 2. 배열에 jsx 값을 넣을때만 , 키값을 주는건가요? 아니면 모든 jsx값에 키를 주어야 하나요 ? 3. Button, Input에 키값은 왜 안주나요?? renderItem = { item => ( < List.Item style = { { marginTop: '20px' } } > < Card actions = { [ < Icon key = "stop" type = "stop" /> ] } > < Card.Meta description = { item } /> 4. renderItem 에서 dataSource값들이 하나하나 돌면서 Icon 들이 같이 생기잖아요. 그런데 모든 Icon의 값이 stop인데 상관 없는건가요 ?? 5. 팔로워 목록 과 팔로잉 목록의 키값이 stop 으로 똑같던데 상관은 없는건가요?

제로초(조현영) · Answer

이 부분은 무료강좌에 나와있는 부분이라, 무료 강좌를 보고 오시는 게 좋습니다. 배열이나 반복문에만 key를 붙입니다. key를 붙이는 이유는 배열 또는 반복문의 컴포넌트는 누가 누구인지 구별하기 힘들기 때문입니다(Icon, Icon, Icon 이렇게 들어있으면 무엇이 어떤 아이콘인지 구별하기 힘듭니다) key를 붙여야 컴포넌트 수정, 삭제, 추가 시 필요한 부분만 변경해 렌더링을 최적화할 수 있습니다. 다른 컴포넌트들은 부모자식관계를 통해서 key 없이도 찾을 수 있습니다. 4. 같은 배열, 같은 반복문 내에서만 구별되면 됩니다. 다른 배열이나 다른 반복문의 같은 key 컴포넌트는 부모자식 관계로 판단할 수 있습니다.

D_One · Answer

지금 보고 왔는데요, 유니크한 키를 쓰라고 하셨는데요. dataSource={['제로초', '바보', '노드버드오피셜']} renderItem={ item => ( ]}> 이 구문이요, renderItem 에서, dataSoruce에서의 제로초 에게 키값이 stop 이라는 아이콘을 부여하고, dataSoruce에서의 바보 에게 키값이 stop 이라는 아이콘을 부여하고, dataSoruce에서의 노드버드오피셜 에게 키값이 stop 이라는 아이콘을 부여하잖아요. 답변처럼 ,다른 배열에서 다른 반복문은 키값이 같아도 상관없다고 하셨는데, 지금 위의 경우는 같은 배열, 같은 반복문에 키값이 같은거 아닌가요?? 키값을 유니크하게 바꿔줘야하는게 맞는거 아닌가요 ? ? ?