페이지구현 - 일기수정(Edit) 수정 에러 질문(세부사항추가)

안녕하세요 이정환입니다.

오류 발생 원인 찾았습니다!

원인은 dummyData와의 id 충돌입니다.

이해하시기 편하게 자세히 설명해드릴게요!

먼저 보내주신 React App에는 다음과 같은 dummyData가 세팅되어 있었습니다.

const dummyData = [
  {
    id: 1,
    date: 1698562548201,
    content: "일기1",
    emotion: 1,
  },
  {
    id: 2,
    date: 1698562548202,
    content: "일기2",
    emotion: 2,
  },
  {
    id: 3,
    date: 1698562548203,
    content: "일기3",
    emotion: 3,
  },
  {
    id: 4,
    date: 1698562548204,
    content: "일기4",
    emotion: 4,
  },
  {
    id: 5,
    date: 1698562548205,
    content: "일기5",
    emotion: 5,
  },
];

그리고 이어서 위 dummyData가 State의 초기값으로 설정되어 있습니다.

  const [data, dispatch] = useReducer(reducer, dummyData);

그럼 현재 App 컴포넌트의 data State의 상태는 다음과 같습니다.

자 그리고 이때 다음과 같이 dataId Ref의 초기값을 0으로 설정해주셨기 때문에

const dataId = useRef(0);

자 이때 새로운 일기를 하나 생성하면 id가 0번인 새로운 일기가 생성됩니다.

그리고 나서 두번째 일기를 생성하면 id가 1번인 일기가 생성됩니다.

이렇게 되면 중복이 발생했습니다.

위 dummyData에서도 id가 1번인 일기를 설정해두었는데

방금 또 id가 1번인 일기가 생성되어 버렸습니다.

자 그러므로 수정, 삭제 등의 기능에서 오류가 발생하게 됩니다.

reducer가 담당하는 수정, 삭제 기능은 다음과 같이 일기의 id를 기반으로 동작하기 때문입니다.

따라서 1이라는 중복된 id를 갖는방금 생성한 일기를 수정하게되면

기존의 dummyData에 존재하던 id가 1인 일기도 함께 수정됩니다.

이때 date, content, emotionId가 모두 수정 결과로 바뀌기 때문에 화면에는 마치 2개의 일기가 생성되는 것 처럼 보이는 것 입니다.

이런 오류를 방지하기 위해 강의에서는 dummyData와의 id 충돌을 막기 위해 다음과 같이 idRef의 값을 아예 6번으로 초기화 해 두고 있습니다.

const idRef = useRef(6);

질문자 님 께서도 Ref의 초기값을 6번이나 그 이상의 번호로 초기화 하셔야 해당 오류를 해결할 수 있습니다.