(18).이정환_react.js강의_감정일기장_프로젝트_5강_기능구현설계, 일기 생성 ,수정 , 삭제의 useRuder, dispatch 작성, Context 생성(작성중)

1_ 각 페이지 당 어떤 기능을 적용해야할지 설계

- Home : 일기 리스트 렌더링

- Diary : 일기 상세 조회

- New : 일기 생성 페이지

- Edit : 기존 일기 수정 페이지

2_ Context를 어디다 배치할지 대략 정하기

시발

3_ 데이터 설계 구축

▶ 순서1_ 초기 mockData 프로퍼티 설정

const mockData = [
    {
        id : , //일기 id
        createDate :, //생성 날짜
        emotionState : new Date().getTime(), //일기의 감정
        content : ,//일기 내용
    }
]

▶ 순서2_ useReducer()로 State 변수 , dispatch() 메소드 작성

작성1_ 일기 생성 메소드 부분

function reducer(diaries, action) {
  switch (action.type) {
    case "CREATE":
      return [action.data, diaries];
    default:
      return diaries;
  }
}



//App.컴포넌트 내부
const idRef = useRef(mockData.length);

  //일기장 생성 메소드
  const onCreateDiary = (createDate, emotionState, content) => {
    dispatch({
      type: "CREATE",
      data: {
        id: ++idRef.current,
        createDate: createDate,
        emotionState: emotionState,
        content: content,
      },
    });
  };

작성2_ ★일기 수정 메소드 부분

function reducer(diaries, action) {
  switch (action.type) {
    case "CREATE":
      return [action.data, diaries];
    case "UPDATE":
      return diaries.map((diary) =>
        diary.id === action.data.id ? action.data : diary
      );
    default:
      return diaries;
  }
}

//App 컴포넌트 내부

 //일기장 수정 메소드
  const onUpdateDiary = (targetID, createDate, emotionState, content) => {
    dispatch({
      type: "UPDATE",
      data: {
        id: targetID,
        createDate: createDate,
        emotionState: emotionState,
        content: content,
      }, //이게 그대로, actionData의 속성명 , 속성값이 된다.
    });
  };

작성3_ 일기 삭제 메소드 부분

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


//App 컴포넌트 내부

  const onDeleteDiary = (targetID) => {
    dispatch({
      type: "DELETE",
      data: targetID,
    });
  };

▶ 순서3_ DiaryContext 와 DiaryDispatch 생성 및 컴포넌트 감싸기 :★ export 빼먹는 실수 조심해 십련아

import { createContext, useContext, useReducer, useRef } from "react";//import 추가

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


//App 컴포넌트 내부

  <DiaryContext.Provider value={diaries}>//value를 통해 보관 => diaries는 그냥 대입
    <DiaryDispatchContext.Provider
      value={{ onCreateDiary, onDeleteDiary, onUpdateDiary }}//value를 통해 보관 => 핸들러들은 객체를 통해 보관
    >
      <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>
  </DiaryContext.Provider>
</>