해결된 질문
24.07.14 13:42 작성
·
86
·
수정됨
1
안녕하세요 section08까지 듣고 투두리스트 복습을 하던 중 할일이 한개는 추가가 되는데 그 뒤로는 추가된 할일에 덮어쓰기가 되어 추가가 안되는 문제가 발생하는 문제가 발생하여 어제부터 해결이 안되 질문남깁니다.
onCreate함수 내부에 로그를 찍어보면새롭게 저장된 데이터가 아닌 매번 기존에 3개 만들어놓은 mockData가 불러와져서 데이터가 추가되는거 까진 확인하였습니다.
또한 useReducer를 사용하면 강의와 같이 정상적으로 되는데 useState를 이용하면 위와 같은 문제가 발생합니다.
몬가 Context를 사용해서 이런 현상이 발생하는 것으로 추측되는데 어떤 차이 때문에 이런 현상이 발생하는지 궁금합니다.
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
답변 1
0
2024. 07. 15. 09:43
안녕하세요 이정환입니다.
이것은 컴포넌트의 마운트 타이밍에 useMemo에 onCreate가 감싸진 이후로 다시는 생성되지 않도록 설정되었기 때문입니다.
이렇게 될 경우 onCreate 함수 내부의 setTodos([newTodos, ...todos]);
함수 호출은 영원히 초기 상태의 todos State
의 값을 참조하게 됩니다.
따라서 이런 문제를 해결하시려면 useReducer를 이용하시거나 또는 함수형 업데이트를 사용하셔야 하는데요
먼저 useReducer의 경우에는 이런 문제를 발생시키지 않습니다. 왜냐면 reducer 함수에게 매개변수로 전달되는 state는 항상 최신의 State 값을 보장하기 때문입니다.
함수형 업데이트란 setState 함수에서 항상 최신의 State 값을 참조하기 위해 사용하는 것으로 다음과 같은 문법으로 사용하실 수 있습니다.
setState((state) => state + 1);
이때 매개변수로 전달되는 State 값은 항상 최신의 State값을 보장합니다.
따라서 질문자님의 경우
setTodos((todos)=>[newTodos, ...todos]);
와 같이 코드를 변경하시는게 좋을 것 같습니다.
2024. 07. 15. 12:57
onCreate함수가 다시 생성되지 않아서 생긴 문제 였군요.
잘 이해가 되었습니다. 감사합니다.