[감정 일기장 만들기] 프로젝트 기초 공사2

먼저 데이터를 관리할 useReducer만들기

App.js

import React, { useReducer, useRef } from "react";
import "./App.css";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "./pages/Home";
import New from "./pages/New";
import Edit from "./pages/Edit";
import Diary from "./pages/Diary";

const reducer = (state, action) => {
  let newState = [];
  switch (action.type) {
    case "INIT": {
      //가데이터 뿌리기
      return action.data;
    }
    case "CREATE": {
      // //매개변수로 바뀌는 애들 들어오고 newItem으로 넣음
      // const newItem = {
      //   ...action.data,
      // }; //newItem에 들어온 데이터 뿌려주고, 원래 있던 상태인 애들도 같이 넣어줘야함(아니면 추가한값만 뜰걸..? => 나중에 확인해보기)
      // newState = [newItem, ...state]; // 확인필요!!!!
      // 위 두줄 줄여서 밑 한줄로 작성 가능
      newState = [action.data, ...state];
      break; // return 여기서 안해서 그럼(switchcase문 빠져나가고 return 해줄것임)
    }
    case "REMOVE": {
      //원래 있던 데이터(state) id랑 들어오는애의 id랑(targetId) 같으면 걔만 지워라
      newState = state.filter((it) => it.id !== action.targetId);
      break;
    }
    case "EDIT": {
      // 원래있던 데이터 id랑 선택한애 id(targetId)랑 같으면 ...action.data는 수정한애까지 다 적용한값 / 아니면 it 반환
      // 저번이랑 다른거! => 우리는 일기의 모든 부분을 수정가능하게 할거다!
      newState = state.map((it) =>
        it.id === action.data.id ? { ...action.data } : it
      );
      break;
    }
    default:
      return;
  }
  return newState;
};

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

  /*dispatch 함수 필요한경우*/
  //CREATE
  const dataId = useRef(0); //id는 useRef 훅으로 만든다
  const onCreate = (date, content, emotion) => {
    //언제 작성된 일기까지도 받을거니까
    dispatch({
      type: "CREATE",
      data: {
        //받아야 하는 항목 : date, content, emotion, id!(여기는 작성자가 없다.)
        date: new Date(date).getTime(), // 커서 올렸을때 보라색으로 뜨면 () 포함임
        content,
        emotion,
        id: dataId.current,
      },
    });
    dataId.current += 1;
  };
  //REMOVE
  const onRemove = (targetId) => {
    dispatch({
      type: "REMOVE",
      targetId,
    });
  };
  //EDIT
  const onEdit = (date, content, emotion, targetId) => {
    dispatch({
      type: "EDIT",
      data: {
        id: targetId, // 얘 빼고 다 바꾸는거
        date: new Date(date).getTime(),
        content,
        emotion,
      },
    });
  };

  return (
    <BrowserRouter>
      <div className="App">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/new" element={<New />} />
          <Route path="/diary/:id" element={<Diary />} />
          <Route path="/edit" element={<Edit />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;

=> simplediary랑 다른점들이 있으니 주의해서 보자!

• 가장 크게 다른점은 수정가능한 요소가 전부라는거!(id빼고)

React.createContext()이용한 데이터 전달하기~~~

• 먼저 contextAPI 사용해서 프로젝트 상태 전역적으로 관리할수 있게 하기!!!(이 컴포넌트 사용할 때, value값을 설정해줘야함(이거 안쓰면 onRemove 등등을 하나하나 prop으로 전달해줘야함!)

=> 사용하려면?

(아직 최적화 고려 안했음~)

import React, { useReducer, useRef } from "react";
import "./App.css";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "./pages/Home";
import New from "./pages/New";
import Edit from "./pages/Edit";
import Diary from "./pages/Diary";

const reducer = (state, action) => {
  let newState = [];
  switch (action.type) {
    case "INIT": {
      //가데이터 뿌리기
      return action.data;
    }
    case "CREATE": {
      // //매개변수로 바뀌는 애들 들어오고 newItem으로 넣음
      // const newItem = {
      //   ...action.data,
      // }; //newItem에 들어온 데이터 뿌려주고, 원래 있던 상태인 애들도 같이 넣어줘야함(아니면 추가한값만 뜰걸..? => 나중에 확인해보기)
      // newState = [newItem, ...state]; // 확인필요!!!!
      // 위 두줄 줄여서 밑 한줄로 작성 가능
      newState = [action.data, ...state];
      break; // return 여기서 안해서 그럼(switchcase문 빠져나가고 return 해줄것임)
    }
    case "REMOVE": {
      //원래 있던 데이터(state) id랑 들어오는애의 id랑(targetId) 같으면 걔만 지워라
      newState = state.filter((it) => it.id !== action.targetId);
      break;
    }
    case "EDIT": {
      // 원래있던 데이터 id랑 선택한애 id(targetId)랑 같으면 ...action.data는 수정한애까지 다 적용한값 / 아니면 it 반환
      // 저번이랑 다른거! => 우리는 일기의 모든 부분을 수정가능하게 할거다!
      newState = state.map((it) =>
        it.id === action.data.id ? { ...action.data } : it
      );
      break;
    }
    default:
      return;
  }
  return newState;
};
// CreateContext - data 공급
export const DiaryStateContext = React.createContext();
// onCreate, onRemove, onEdit 전달
export const DiaryDispatchContext = React.createContext();

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

  /*dispatch 함수 필요한경우*/
  //CREATE
  const dataId = useRef(0); //id는 useRef 훅으로 만든다
  const onCreate = (date, content, emotion) => {
    //언제 작성된 일기까지도 받을거니까
    dispatch({
      type: "CREATE",
      data: {
        //받아야 하는 항목 : date, content, emotion, id!(여기는 작성자가 없다.)
        date: new Date(date).getTime(), // 커서 올렸을때 보라색으로 뜨면 () 포함임
        content,
        emotion,
        id: dataId.current,
      },
    });
    dataId.current += 1;
  };
  //REMOVE
  const onRemove = (targetId) => {
    dispatch({
      type: "REMOVE",
      targetId,
    });
  };
  //EDIT
  const onEdit = (date, content, emotion, targetId) => {
    dispatch({
      type: "EDIT",
      data: {
        id: targetId, // 얘 빼고 다 바꾸는거
        date: new Date(date).getTime(),
        content,
        emotion,
      },
    });
  };

  return (
    <DiaryStateContext.Provider value={data}>
      <DiaryDispatchContext.Provider value={{ onCreate, onEdit, onRemove }}>
        <BrowserRouter>
          <div className="App">
            <Routes>
              <Route path="/" element={<Home />} />
              <Route path="/new" element={<New />} />
              <Route path="/diary/:id" element={<Diary />} />
              <Route path="/edit" element={<Edit />} />
            </Routes>
          </div>
        </BrowserRouter>
      </DiaryDispatchContext.Provider>
    </DiaryStateContext.Provider>
  );
}

export default App;