React에서 새로운 id의 문제점

데이터베이스에서 다음과 같은 객체 배열이 도착했다고 가정해 봅시다:

const prods = [
	{id: 1, name: 'product1', cost: 100},
	{id: 2, name: 'product2', cost: 200},
	{id: 3, name: 'product3', cost: 300},
];

보시다시피, id는 순서대로 번호가 매겨집니다. 그러나 숫자에는 간격이 있을 수 있다는 점을 고려해야 합니다. 예를 들어, 3번째 다음에 바로 5번째나 6번째가 올 수 있습니다. 이 때문에 우리 클라이언트 스크립트는 다음 id가 무엇이 될지 알 수 없습니다 (우리의 경우 반드시 4가 아닐 수 있습니다).

새로운 id는 서버의 데이터베이스에 의해 생성됩니다. 이는 클라이언트에서 작업할 때 몇 가지 문제를 일으킬 수 있습니다. 요점은 다음과 같습니다: 폼을 사용하여 배열에 새로운 요소를 추가했다고 상상해보세요. 그러나 우리는 폼의 데이터를 단순히 가져와서 추가할 수 없습니다. 왜냐하면 새 요소의 id가 무엇이 될지 모르기 때문입니다!

서버에 요청을 보내서 다음 순서의 id를 받아온 후에야 객체 배열에 요소를 추가할 수 있습니다. 이로 인해 화면에 데이터가 표시되는 데 지연이 발생할 것입니다: 데이터가 서버에 도착하고, 서버가 우리에게 다시 보내올 때까지 일정 시간이 소요됩니다.