React는 리스트를 렌더링할 때 key를 기준으로 이전 요소와 새로운 요소를 매칭한다. index는 항목의 위치 정보이기 때문에 중간 삽입이나 삭제가 발생하면 값이 바뀌고, 이로 인해 React가 서로 다른 데이터를 같은 컴포넌트로 인식해 state나 DOM을 잘못 재사용할 수 있다. 따라서 key로는 index 대신 변경되지 않는 고유한 id를 사용하는 것이 안전하다.

React에서 index를 key로 쓰면 안 되는 이유

유튜브 IFrame API로 음악 플레이어 만들기

객체/배열 selector 리렌더링 잡는 가장 현실적인 방법

Zustand useShallow 정리

1) 문제 상황: “selector가 객체/배열을 반환하면” 왜 리렌더링이 늘까?

3) 사용법: store hook에 selector 대신 useShallow(selector)사용

1) 여러 값을 객체로 묶어 가져올 때

3) 계산된 값을 반환하는 selector가 있을 때

1) 중첩 객체의 내부 변화까지 정확히 추적하고 싶을 때

2) selector가 매번 새로운 함수를 만들 때

❗ useShallow 썼는데도 리렌더링 됨

❗ 무조건 useShallow를 쓰면 안되는가?