인프런 커뮤니티 질문&답변

강사님 조언을 참고하여 코드를 실행하며 key 값(DiaryList.jsx에서 아래 코드 부분)을 살펴 보았더니 일기를 새로 생성할 때 키 값이 3으로 중복 할당되더군요.

            <div className="list_wrapper">
                {sortedData.map((item) => (
                    <DiaryItem key={item.id} {...item} />

키 값이 3으로 중복 할당 되는 이유는 다음과 같이 App.jsx에서 초기 값을 3으로 설정하였기 때문입니다. 그래서 const idRef = useRef(3)을 useRef(4)로 바꾸었더니 오류가 없이 잘 동작하였습니다. 아래 코드에서와 같이 onCreate에서 id: idRef.current++ 부분에서 초기 설정값(3)을 id에 할당하고 나서 증가 연산(++)이 일어나기 때문에 id 값(결국 키 값)이 3으로 중복 할당 된 것이라 판단되네요. 초기 값을 4로 변경하고 나서 더 이상 문제가 발생하지 않았습니다만, 궁금한 것이 어떻게 강사님은 이 부분에서 오류가 발생하지 않은 것 일까요? 다시 한 번 강사님의 Git hub의 코드를 살펴보니 강사님 코드는 useRef(3)으로 설정되어 있더군요.

  const [data, dispatch] = useReducer(reducer, mockData);
  const idRef = useRef(3);

  //일기 생성
  const onCreate = (createdDate, emotionId, content) => {
    dispatch({
      type: "CREATE",
      data: {
        id: idRef.current++,
        createdDate,
        emotionId,
        content,
      },
    });
  }

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

제 강의에서는 월 별로 일기가 나누어 렌더링 되고 있어서 임시 데이터 활용 중에도 버그가 발생하지 않고 있는것 같아요, 그리고 이후의 과정에서는 목 데이터를 제거 하기 때문에 또 문제가 발생하지 않게 되구요

이 부분은 제 디테일이 조금 부족했네요 ㅠㅠ 시간이 될 때 헷갈리시지 않도록 변경 해 두겠습니다. 지금은 idRef의 값을 4로 변경하시어 작업하시는걸 추천드립니다.

항상 빠른 응답을 주심에 감사드립니다. 관련된 문제는 완전히 해결되었습니다. 감사합니다.

혹시 오타의 가능성이 있을까 해서, 강사님의 코드와 제 코드를 Diffchecker로 확인한 결과 오타는 없었습니다. 현재는 수업을 따라가고 있는 상황이라 제가 별도로 코드를 작성하지 않고 수업 진행에 맞춰 수업 내용과 일치하는 코딩을 하고 있는 상황입니다.