문제가 발생했다.
<aside>
💥 Warning: Encountered two children with the same key, 0. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
</aside>
let id = 0;
export const onCreate = (date, content, emotion) => ({
type: MEMORY_CREATE,
data: {
id: id++,
date: new Date(date).getTime(),
content,
emotion,
},
});
나는 Action함수를 발생시킬 때 id값이 증가 됨에 따라서 생성되는 데이터들은 id값이 1씩 올라가게 된다.
하지만 새로 고침이 발생하고 난 후에는 id 값이 초기화가 된다 그에 따라서 새로생긴 데이터는 다시 id값이 0이 되어버리는 문제가 발생한다.
0번째 인덱스와 3번째 인덱스가 동일한 id값을 갖게되었다. 이는 성능상의 문제를 줄 수 있다. 그러면 이를 해결하기 위해서는 어떻게 해야할까 ?
import { v4 as uuid } from "uuid";
export const onCreate = (date, content, emotion) => ({
type: MEMORY_CREATE,
data: {
id: uuid(),
date: new Date(date).getTime(),
content,
emotion,
},
});
uuid를 통해서 고유 키값을 만들어주었다.
값마다 고유의 id값을 갖게 되어 문제가 해결이 된 줄 알았지만 다른 문제가 발생했다.
수정하기 버튼에 라우팅을 걸어두었는데 무슨 이유인 줄은 모르겠지만 해당 id값으로 이동을 하지 못하는 에러가 발생했다. 멀쩡한 아이템 리스트를 만들었음에도 불구하고 해당 데이터는 라우팅이 발생하지 않는 에러가 발생했다. 아마도 uuid를 통해서 만든 고유의 키 값에는 문자열이 들어가 있어서 에러가 발생한 듯 하다 어쩔 수 없이 다른 방법을 사용하기로 했다.