리액트에서 왜 굳이 key를 지정해줘야하지???

윤도훈·2024년 9월 18일
post-thumbnail

예시코드

key를 지정하지않는다면?


key를 지정해주지 않는다면 배열함수가 돌아갈때 모든 요소들을 렌더링시켜버립니다. 위 코드로 예시를 들자면 새로운 요소가 추가될때마다 원래 있던 요소를 기억하지못하여 다시 모든 리스트들을 생성해냅니다.
만약 리스트가 1000개, 10000개가 있는데 추가될때마다 생성되면 욕도 오지게 생성되겠죠잉?

잘못된 key를 지정한다면?

index는?

근데 그럼 keyindex값 주면 끝 아니야? 할 수 있습니다. 하지만 index도 무적은 아닙니다. 추가하기가 됐을때 인덱스값이 밀려나면서 새로추가된 친구가 인덱스 0을 가지게되요. 이러면은 위에랑 똑같겠죠?

중복된다면?

중복된 key를 가지게 된다면? 당연히 이상해질거같지만 결과는 요소복제가 되거나 업데이트가 이상하게 될수도 있습니다. 당연히 하지말아야겠죠?

key를 지정하는 올바른 방법

네, 그래서 올바르게 주기위해서는

state오브젝트 형식으로 제작하여 id라는 key를 만들어줍니다.

keyid로 겹치지않게 지정해줍니다.

느낀점

솔직히 나도 key? 귀찮은데 안해야징ㅎ 이였지만
음 해야할것같다 안그러면 나중에 어어...? 이거 왜 안되지 왜 복사가 되지??? 하면서 GPT도와줘 ㅠㅠㅠ 할거 뻔함.
안그러기 위해서는 내가 똑똑해져야지 에효 그냥 key귀찮더라도 지정해주자~~

0개의 댓글