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

안녕하세요 section08까지 듣고 투두리스트 복습을 하던 중 할일이 한개는 추가가 되는데 그 뒤로는 추가된 할일에 덮어쓰기가 되어 추가가 안되는 문제가 발생하는 문제가 발생하여 어제부터 해결이 안되 질문남깁니다.

onCreate함수 내부에 로그를 찍어보면새롭게 저장된 데이터가 아닌 매번 기존에 3개 만들어놓은 mockData가 불러와져서 데이터가 추가되는거 까진 확인하였습니다.

또한 useReducer를 사용하면 강의와 같이 정상적으로 되는데 useState를 이용하면 위와 같은 문제가 발생합니다.

몬가 Context를 사용해서 이런 현상이 발생하는 것으로 추측되는데 어떤 차이 때문에 이런 현상이 발생하는지 궁금합니다.

App.jsx

import './App.css'
import Header from "./component/Header.jsx";
import Editor from "./component/Editor.jsx";
import List from "./component/List.jsx";
import {createContext, useMemo, useRef, useState} from "react";

export const ContextStateData = createContext();
export const ContextDispatchData = createContext();

const mockData = [{
    id: 0, isDone: false, content: "Study react", date: new Date().getTime()
}, {
    id: 1, isDone: false, content: "go to bed", date: new Date().getTime()
}, {
    id: 2, isDone: false, content: "play game", date: new Date().getTime()
},];

function App() {

    const [todos, setTodos] = useState(mockData);
    const idRef = useRef(3);

    const onCreate = (content) => {
        const newTodos = {
            id: idRef.current++,
            isDone: false,
            content: content,
            date: new Date().getTime()
        }
        setTodos([newTodos, ...todos]);
    }

    const memorizedDispatch = useMemo(() => {
        return {onCreate}
    }, []);

    return (<div className="App">
        <Header/>
        <ContextStateData.Provider value={todos}>
            <ContextDispatchData.Provider value={memorizedDispatch}>
                <Editor/>
                <List/>
            </ContextDispatchData.Provider>
        </ContextStateData.Provider>

    </div>)
}

export default App

전체 코드 깃허브 주소

https://github.com/ironwhale1014/one-bite-react/tree/main/todo_list_train