[9.2 투두리스트 업그레이드] id undefined

안녕하세요. 투두리스트 업그레이드 중 "UPDATE" 에서 질문있습니다.

업그레이드 하며 체크박스를 선택했을 때 다음과 같은 오류가 발생합니다.

업그레이드 이전까지는 잘 돌아가서 업그레이드 하며 오타 문제가 아닐까 하는데 원인을 찾기가 어려워 질문 드립니다.. ㅜ
APP.jsx 와 List.jsx 코드 올려드립니다.

- APP.jsx

import "./App.css";
import Header from "./components/Header";
import Editor from "./components/Editor";
import List from "./components/List";
import { useState, useRef, useReducer } from "react";

const mockData = [
  {
    id: 0,
    isDone: false,
    content: "Study React.js",
    date: new Date().getTime(),
  },
  {
    id: 1,
    isDone: false,
    content: "do laundry",
    date: new Date().getTime(),
  },
  {
    id: 2,
    isDone: false,
    content: "wanna go home",
    date: new Date().getTime(),
  },
];

function reducer(state, action) {
  switch (action.type) {
    case "CREATE":
      return [action.data, ...state];
    case "UPDATE":
      return state.map((item) => {
        item.id === action.targetId ? { ...item, isDone: !item.isDone } : item;
      });
    case "DELETE":
      return state.filter((item) => item.id !== action.targetId);
    default:
      return state;
  }
}

function App() {
  const [todos, dispatch] = useReducer(reducer, mockData);
  const idRef = useRef(3);

  const onCreate = (content) => {
    dispatch({
      type: "CREATE",
      data: {
        id: idRef.current++,
        isDone: false,
        content: content,
        date: new Date().getTime(),
      },
    });
  };

  const onUpdate = (targetId) => {
    dispatch({
      type: "UPDATE",
      targetId: targetId,
    });
  };

  const onDelete = (targetId) => {
    dispatch({
      type: "DELETE",
      targetId: targetId,
    });
  };

  return (
    <div className="App">
      <Header />
      <Editor onCreate={onCreate} />
      <List todos={todos} onUpdate={onUpdate} onDelete={onDelete} />
    </div>
  );
}

export default App;

• List.jsx

import "./List.css";
import TodoItem from "./TodoItem";
import { useState } from "react";

const List = ({ todos, onUpdate, onDelete }) => {
  const [search, setSearch] = useState("");

  const onChangeSearch = (e) => {
    setSearch(e.target.value);
  };

  const getFilteredData = () => {
    if (search === "") {
      return todos;
    }
    return todos.filter((todo) =>
      todo.content.toLowerCase().includes(search.toLowerCase())
    );
  };

  const filteredTodos = getFilteredData();

  return (
    <div className="List">
      <h4>Todo List 🎈</h4>
      <input
        value={search}
        onChange={onChangeSearch}
        placeholder="검색어를 입력하세요"
      />
      <div className="todos_wrapper">
        {filteredTodos.map((todo) => {
          return (
            <TodoItem
              onDelete={onDelete}
              onUpdate={onUpdate}
              key={todo.id}
              {...todo}
            />
          );
        })}
      </div>
    </div>
  );
};

export default List;

답변 4

0

이정환 Winterlood

2025-04-04T01:33:15.357Z

안녕하세요 한나님 해결하셨다니 다행입니다.

다만 이후 질문부터는 꼭 아래의 질문 가이드라인을 준수해 올려주시면 감사하겠습니다 ㅠㅠ!

 

0

yanna

2025-04-10T04:28:29.616Z

아 .. ! 넵 알겠습니다 !

0

chocolate7410

2025-04-03T08:36:48.747Z

Okay, looks like we've got a bug with the To-Do list upgrade, specifically around undefined IDs. The 2025-04-03 update at 14:55 seems to be the culprit. Anyone else experiencing this? It’s a bit like navigating a tricky level in Eggy Car, one wrong move and boom! Hope a fix comes soon; dealing with this is kinda like constantly restarting that difficult Eggy Car level!

0

yanna

2025-04-03T08:05:18.372Z

앗 해결했습니다 .! ㅎㅎ

0

인프런 AI 인턴

2025-04-03T08:01:24.203Z

안녕하세요, 인프런 AI 인턴입니다. 한나님. “UPDATE” 과정에서 id undefined 오류를 겪고 계신 것 같습니다. 오류가 발생하는 이유는 reducer 함수의 “UPDATE” 케이스에서 리턴값이 없는 상태에서 state.map 을 사용하고 있기 때문입니다. 이 문제를 해결하려면 state.map 안의 return 구문을 추가하여 변경된 상태를 리턴하는 로직을 만들어야 합니다.

문제 분석 및 해결 방법:

1. reducer의 “UPDATE” 케이스: 현재 map 메서드 내부에 return 구문이 빠져 있습니다. map 함수는 새로운 배열을 반환해야 하므로, 각 아이템을 처리할 때 항상 값을 반환해야 합니다.
   

   case "UPDATE":
     return state.map((item) => 
       item.id === action.targetId ? { ...item, isDone: !item.isDone } : item 
     );

2. 리턴 구문 추가: map 함수 내부에 return 키워드를 추가해 조건에 따라 변형된 객체 또는 원래 객체를 반환하도록 수정합니다.
   

위 코드를 반영하면 해당 오류가 해결될 가능성이 큽니다. state.map 호출 시 각 아이템이 제대로 반환되지 않는 문제를 해결하였기 때문에 id 속성을 읽을 때 발생했던 오류도 함께 해결될 것입니다.

유사한 문제를 다룬 기존의 질문/답변들도 살펴보면 도움이 될 수 있습니다:

• Redux reducer 내부의 switch-case에서 리턴이 누락되었을 때 발생하는 에러 해결
  

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.