기존 dummyData.js 파일로 진행하는 데에는 문제가 있어 코드를 변경해봅시다.

먼저 기존 dummyData.js 파일은 아래와 같습니다.

• src/lib/dummyData.js

export const dummyData = {
  "0": {
    id: "0",
    name: "John",
    phone: "010-0000-0000"
  },
  "1": {
    id: "1",
    name: "Peter",
    phone: "010-1111-1111"
  },
  "2": {
    id: "2",
    name: "Elise",
    phone: "010-2222-2222"
  },
  "3": {
    id: "3",
    name: "Chris",
    phone: "010-3333-3333"
  },
  "4": {
    id: "4",
    name: "Austin",
    phone: "010-4444-4444"
  },
  "5": {
    id: "5",
    name: "Adam",
    phone: "010-5555-5555"
  }
};

위의 파일에서 dummyData 변수는 Json 형식으로 key 값이 존재합니다. 따라서 새로운 전화번호부 아이템을 추가할 때, 키 값을 다르게 해야 데이터를 저장하는 데 문제가 발생하지 않습니다. 따라서 nextId 라는 변수를 추가해 이를 key 값으로 설정할 수 있게 하고, setNextId 라는 함수를 통해 데이터를 추가할 때마다 nextId 값을 1씩 늘려주겠습니다. 아래와 같이 코드를 변경해주세요.

• src/lib/dummyData.js

export const dummyData = {
  "0": {
    id: "0",
    name: "John",
    phone: "010-0000-0000"
  },
  "1": {
    id: "1",
    name: "Peter",
    phone: "010-1111-1111"
  },
  "2": {
    id: "2",
    name: "Elise",
    phone: "010-2222-2222"
  },
  "3": {
    id: "3",
    name: "Chris",
    phone: "010-3333-3333"
  },
  "4": {
    id: "4",
    name: "Austin",
    phone: "010-4444-4444"
  },
  "5": {
    id: "5",
    name: "Adam",
    phone: "010-5555-5555"
  }
};

export var nextId = Object.keys(dummyData).length;

export const setNextId = () => {
  nextId++;
};

다음 장으로 넘어가기 전에 nextId 변수 선언 부분에서 사용되는 문법 하나만 설명하고 넘어가겠습니다. 위에서 사용되는 Object.keys 함수는 Key 값으로 배열을 만들어 반환하는 함수입니다. 처음 생성될 때, dummyData는 Key 값으로 1, 2, 3, 4, 5를 가지고 있으므로 Object.keys(dummyData)의 반환 값은 [1, 2, 3, 4, 5]가 되는 것입니다.