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

import { Route, Routes } from "react-router-dom";
import { useReducer, useRef, createContext, useEffect, useState } from "react";
import Home from "./pages/Home";
import New from "./pages/New";
import Diary from "./pages/Diary";
import Notfound from "./pages/Notfound";
import Edit from "./pages/Edit";

const mockData = [
  {
    id: 1,
    createdDate: new Date("2024-10-01").getTime(),
    emotionId: 1,
    content: "1번일기 내용",
  },
  {
    id: 2,
    createdDate: new Date("2024-10-10").getTime(),
    emotionId: 2,
    content: "2번일기 내용",
  },
  {
    id: 3,
    createdDate: new Date("2024-09-09").getTime(),
    emotionId: 3,
    content: "3번일기 내용",
  },
  {
    id: 4,
    createdDate: new Date("2024-10-04").getTime(),
    emotionId: 3,
    content: "3번일기 내용",
  },
];

function reducer(state, action) {
  let nextState; 

  switch (action.type) {
    case "INIT": {
      return action.data; 
    }
    case "CREATE": {
      nextState = [...state, action.data];
      break;
    }
    case "UPDATE": {
      nextState = state.map((item) =>
        item.id === action.data.id ? action.data : item
      );
      break;
    }
    case "DELETE":
      nextState = state.filter((item) => item.id !== action.id);
      break;
    default:
      return state;
  }
  localStorage.setItem("diary", JSON.stringify(nextState));
  return nextState;
}

export const DiaryStateContext = createContext();
export const DiaryDispatchContext = createContext();

function App() {
  const [isLoading, setIsLoading] = useState(true);
  const [data, dispatch] = useReducer(reducer, []);
  const idRef = useRef(0);

  useEffect(() => {
    const storedData = localStorage.getItem("diary");
    if (!storedData) {
      setIsLoading(false); 
      return;
    }
    const persedData = JSON.parse(storedData);
    if (!Array.isArray(persedData)) {
      setIsLoading(false);
      return; 
    }

   
    let maxId = 0;
    persedData.forEach((item) => {
      if (Number(item.id) > maxId) {
        maxId = Number(item.id);
      }
    });

    idRef.current = maxId + 1;

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

    setIsLoading(false);
  }, []);

  const onCreate = (createdDate, emotionId, content) => {
    dispatch({
      type: "CREATE",
      data: {
        id: idRef.current++,
        createdDate,
        emotionId,
        content,
      },
    });
  };

  if (isLoading) {
    return <div>데이터 로딩중입니다...</div>;
  }

  const onUpdate = (id, createdDate, emotionId, content) => {
    dispatch({
      type: "UPDATE",
      data: {
        id,
        createdDate,
        emotionId,
        content,
      },
    });
  };

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

  return (
    <>
      <DiaryStateContext.Provider value={data}>
        <DiaryDispatchContext.Provider value={{ onCreate, onUpdate, onDelete }}>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/new" element={<New />} />
            <Route path="/diary/:id" element={<Diary />} />
            <Route path="/edit/:id" element={<Edit />} />
            <Route path="*" element={<Notfound />} />
          </Routes>
        </DiaryDispatchContext.Provider>
      </DiaryStateContext.Provider>
    </>
  );
}

export default App;

질문폭탄 죄송합니다ㅠㅠㅠ

1. 왜 저는 새로고침하면 빈배열로 화면에 나타날까요? 로컬스토리지에 저장은 되더라구요

2. 그리고 let nextState; 이렇게 저장하면 state값이 바뀔 때 nexState도 초기화 되지 않나요? 초기화 되고 나서 값을 저장한 후 사용해서 상관이 없는건가요?