[감정 일기장] 일기 관리 기능 구현하기 2

 

---

📖 일기 관리 기능 구현하기 2

이번에는 React에서 일기 관리 기능을 구현해보았다.
일기를 추가, 수정, 삭제할 수 있도록 상태를 관리하고,

Context API를 활용해 전역에서 데이터를 쉽게 접근할 수 있도록 구성했다.

🛠️ 주요 기능

1. 일기 추가 ✏️
   새로운 일기를 작성하고 저장할 수 있다.
2. 일기 수정 🔄
   기존에 작성한 일기의 내용을 수정할 수 있다.
3. 일기 삭제 🗑️
   특정 일기를 삭제할 수 있다.
4. 전역 상태 관리 (Context API 활용) 🌎
   모든 페이지에서 일기 데이터를 쉽게 사용할 수 있도록 설정했다.

---

🏗️ 구현 과정

1️⃣ 상태 관리와 useReducer 활용

일기 데이터를 효율적으로 관리하기 위해 useReducer를 사용했다.
CREATE, UPDATE, DELETE 세 가지 액션을 정의하고, 이에 따라 상태가 변경되도록 설정했다.

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

---

2️⃣ Context API로 전역 상태 관리

일기 데이터를 여러 페이지에서 공유할 수 있도록 createContext를 활용했다.
이를 통해 Home, Diary, New, Edit 페이지에서 데이터를 편리하게 사용할 수 있다.

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

이렇게 만든 Context를 Provider로 감싸서 애플리케이션 전체에서 접근할 수 있도록 했다.

<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>

---

3️⃣ 일기 추가, 수정, 삭제 기능 구현

각 기능을 구현하면서 useReducer의 dispatch를 활용했다.

 

✅ 일기 추가 함수

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

✅ 일기 수정 함수

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

✅ 일기 삭제 함수

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

---

🔥 마무리

 

이번 프로젝트를 통해 useReducer와 Context API를 활용해 상태를 효과적으로 관리하는 방법을 연습할 수 있었다.
특히, 여러 페이지에서 데이터를 공유하는 구조를 직접 구현하면서 전역 상태 관리의 중요성을 다시 한번 느꼈다.

다음에는 페이지 별로 UI와 기능을 구현하여 감정 일기장의 기능을 구체화 해보려 한다. 😃