data와 onCreate, onRemove, onEdit 을 같은 context에서 전달하면 안되는 이유

import React, {

useCallback,

useEffect,

useMemo,

useReducer,

useRef,

createContext

} from "react";

import DiaryEditor from "./DiaryEditor";

import DiaryList from "./DiaryList";

import "./App.css";

export const DiaryStateContext = createContext(null);

export const DiaryDispatchContext = createContext(null);

const reducer = (state, action) => {

switch (action.type) {

case "INIT": {

return action.data;

}

case "CREATE": {

const created_date = new Date().getTime();

const newItem = {

...action.data,

created_date

};

return [newItem, ...state];

}

case "REMOVE": {

return state.filter((it) => it.id !== action.targetId);

}

case "EDIT": {

return state.map((it) =>

it.id === action.targetId

? {

...it,

content: action.newContent

}

: it

);

}

default:

return state;

}

};

const App = () => {

const [data, dispatch] = useReducer(reducer, []);

const dataId = useRef(0);

const getData = async () => {

setTimeout(async () => {

const res = await fetch(

"https://jsonplaceholder.typicode.com/comments"

).then((res) => res.json());

const initData = res.slice(0, 20).map((it) => {

return {

author: it.email,

content: it.body,

emotion: Math.floor(Math.random() * 5) + 1,

created_date: new Date().getTime(),

id: dataId.current++

};

});

dispatch({ type: "INIT", data: initData });

}, 2000);

};

useEffect(() => {

getData();

}, []);

const onCreate = useCallback((author, content, emotion) => {

dispatch({

type: "CREATE",

data: { author, content, emotion, id: dataId.current }

});

dataId.current += 1;

}, []);

const onRemove = useCallback((targetId) => {

dispatch({ type: "REMOVE", targetId });

}, []);

const onEdit = useCallback((targetId, newContent) => {

dispatch({

type: "EDIT",

targetId,

newContent

});

}, []);

const memoizedDiaryAnalysis = useMemo(() => {

const goodCount = data.filter((it) => it.emotion >= 3).length;

const badCount = data.length - goodCount;

const goodRatio = (goodCount / data.length) * 100.0;

return { goodCount, badCount, goodRatio };

}, [data.length]);

const { goodCount, badCount, goodRatio } = memoizedDiaryAnalysis;

const store = {

data

};

const memoizedDispatch = useMemo(() => {

return { onCreate, onRemove, onEdit };

}, []);

return (

<DiaryStateContext.Provider value={store}>

<DiaryDispatchContext.Provider value={memoizedDispatch}>

<div className="App">

<DiaryEditor />

<div>전체 일기 : {data.length}</div>

<div>기분 좋은 일기 개수 : {goodCount}</div>

<div>기분 나쁜 일기 개수 : {badCount}</div>

<div>기분 좋은 일기 비율 : {goodRatio}%</div>

<DiaryList />

</div>

</DiaryDispatchContext.Provider>

</DiaryStateContext.Provider>

);

};

export default App;