usereducer 투두리스트 업그레이드 질문

Question

usereducer 강의를 들으면서 코드를 바꿨습니다

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


const mockData = [
  { 
    id : 0,
    isDone : false,
    content : "react study",
    date : new Date().getTime(),
  }, { 
    id : 1,
    isDone : false,
    content : "lol",
    date : new Date().getTime(),
  }, { 
    id : 2,
    isDone : false,
    content : "fifa",
    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 : useRef.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;

문제는 이렇게 바꾼 후에 초기 mock data는 check box와 삭제가 문제가 없지만

새롭게 추가한 리스트에 대해서는 check box와 삭제가 제대로 실행되지 않습니다.

강의를 몇번 돌려봐도 app.jsx를 제외한 부분을 고치는 과정은 없었고 usereducer로 바꾸기 직전으로 넘어가서 section 08에서는 새롭게 추가된 리스트에 대하여 check box와 삭제가 문제없는걸 보면 usereducer를 사용하면서 문제가 생긴 것 같은데 뭐가 문제인지 잘 모르겠습니다

) } export default App; 문제는 이렇게 바꾼 후에 초기 mock data는 check box와 삭제가 문제가 없지만 새롭게 추가한 리스트에 대해서는 check box와 삭제가 제대로 실행되지 않습니다. 강의를 몇번 돌려봐도 app.jsx를 제외한 부분을 고치는 과정은 없었고 usereducer로 바꾸기 직전으로 넘어가서 section 08에서는 새롭게 추가된 리스트에 대하여 check box와 삭제가 문제없는걸 보면 usereducer를 사용하면서 문제가 생긴 것 같은데 뭐가 문제인지 잘 모르겠습니다

wjchoi1221 · Answer

감사합니다 해결됐습니다

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. wjchoi1221님. 현재 useReducer 를 사용하면서 새롭게 추가한 리스트 항목에서 체크박스와 삭제 기능이 제대로 작동하지 않는 문제가 발생하고 있는 것 같습니다. 이 문제는 새로운 항목에 대한 id 참조가 잘못 처리되고 있어서 발생할 수 있습니다. 문제의 원인 onCreate 함수에서 id 를 증가시키는 방법이 잘못되어 있습니다. id 를 증가시키기 위해 useRef.current++ 사용하셨는데, useRef.current 가 아니라 idRef.current 로 참조해서 증가시켜야 합니다. 이로 인해 새로운 항목으로 추가되는 id 값이 유효하지 않게 되어, UPDATE 및 DELETE 가 원하는 항목을 식별하지 못하게 됩니다. 해결 방법 onCreate 함수 내부에서 id 를 제대로 참조할 수 있도록 다음과 같이 수정해야 합니다: const onCreate = (content) => { dispatch({ type: "CREATE", data: { id: idRef.current++, // 이 부분을 수정하세요. isDone: false, content: content, date: new Date().getTime(), } }); } 이렇게 수정하면 각 새로운 항목은 고유한 id 를 가지게 되어, onUpdate 와 onDelete 함수가 정상적으로 작동하게 될 것입니다. 유사한 문제가 논의된 다른 질문을 참고하시면 도움이 될 수 있습니다: useReducer를 사용하면서 생긴 문제 - useReducer 사용 시 발생할 수 있는 일반적인 문제와 해결 방법을 설명하고 있습니다. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

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

usereducer 투두리스트 업그레이드 질문

문제의 원인

해결 방법