👨‍💻 사건

• 쇼핑몰 구현중, redux를 활용하여 상태관리를 해보다 생긴 생각이다. 처음에는 쇼핑카트에 담을 목록은 선택하고, 이 선택된 리스트를 다른 컴포넌트에서 map 함수를 돌려 데이터를 순회할 생각이였다. 그 과정에서 아무생각없이 key값에 각 목록들의 id 값을 지정했다. 그러다 문뜩, 그냥 순서에 상관없으니 index를 넣어도 상관없지 않을까?란 생각을 잠시하였다.

✅ 해결

뽑아온 리스트들의 상태 관리를 위해서는, 각 key값에 맞는 항목들의 상태를 관리해주어야 한다.
내가 한 실습으로 예를 들면, 쇼핑카트에 담을 목록의 데이터를 store 에 저장을 하였고, 나는 또 다른 컴포넌트에서 이를 불러와, 수정을 하는 상황이였다.
이럴 경우, key값을 바꾸어 버린다면 원래 바꾸기전의 데이터에 전혀 다른 데이터로 덮어씌우는 꼴 이 나버리기 때문에, 각 key값에 유의하면서 사용해야한다.

<예시>

			...
				{cartData.map((item) => ( <CartListDetail key={item.id} productData={item[0]} count={item[1]} /> ))} // 유니크한 key 값을 부여한다.
			...

💭 개선

단순히 순서가 필요없는 리스트라고 생각하여, 전에 부여했던 key 값들을 바꿀번한 아찔한 상황이였다고 생각한다. 이를 잘 생각하여, 다음부턴 이런일이 없도록 하여야겠다.