(24).이정환_react.js강의_감정일기장_프로젝트_10강_ 웹스토리지 사용, 적용방법

● 순서1_ 데이터를 수정 삭제 생성을 담당하는 reducer() 에 데이터가 수정될 때마다, 웹스토리지에도 반영되도록 코드 수정

function reducer(diaries, action) {
  let nextDiaries;

  switch (action.type) {
    case "CREATE": {
      nextDiaries = [action.data, ...diaries];
      break;
    }
    case "UPDATE": {
      nextDiaries = diaries.map((diary) =>
        diary.id === action.data.id ? action.data : diary
      );
      break;
    }
    case "DELETE": {
      nextDiaries = diaries.filter((diary) => diary.id !== action.data);
      break;
    }
  }

  localStorage.setItem("diary", JSON.stringify(nextDiaries));

  return nextDiaries;
}

● 순서2_ 데이터를 수정 삭제 생성을 담당하는 reducer() 에 데이터가 수정될 때마다, 웹스토리지에도 반영되도록 코드 수정

function reducer(diaries, action) {
  let nextDiaries;

  switch (action.type) {
    case "INIT":
      return action.data;
    case "CREATE": {
      nextDiaries = [action.data, ...diaries];
      break;
    }
    case "UPDATE": {
      nextDiaries = diaries.map((diary) =>
        diary.id === action.data.id ? action.data : diary
      );
      break;
    }
    case "DELETE": {
      nextDiaries = diaries.filter((diary) => diary.id !== action.data);
      break;
    }
  }

  localStorage.setItem("diary", JSON.stringify(nextDiaries));

  return nextDiaries;
}

function App(){
.
.
.
.


  const [isLoading, setIsLoading] = useState(true);
  const [diaries, dispatch] = useReducer(reducer, mockData);
  const idRef = useRef(mockData.length);

  useEffect(() => {
    const storedDiaries = localStorage.getItem("diary");

    if (!storedDiaries) {
      setIsLoading(false);
      return;
    }

    const parsedDiaries = JSON.parse(storedDiaries);

    if (Array.isArray(parsedDiaries)) {
      setIsLoading(false);
      return;
    }

    let maxId = 0;

    parsedDiaries.forEach((item) => {
      if (Number(item.id) > maxId) maxId = Number(item.id);
    });

    idRef.current = maxId;

    dispatch({
      type: "INIT",
      data: parsedDiaries,
    });
  }, []);




if (isLoading) return <div>데이터 로딩중...</div>;