[React] 40. 일기 관리 기능 구현 (1)

서회정

Mar 11, 2026

Contents

1. 기능 정리 2. Edit 페이지 라우팅 3. 일기 데이터 상태 만들기

1. 기능 정리

감정 일기장에서 만들어야하는 기능은 크게 네 가지이다.

home : 일기 리스트 렌더링

diary : 일기 상세 조회 (렌더링)

new : 새로운 일기 작성 (리스트에 추가)

edit : 기존 일기 수정

그래서 이 프로젝트의 핵심은 일기라는 상태를 관리하는 것이다.

2. Edit 페이지 라우팅

기능 구현에 앞서 edit페이지를 만들지 않아서 해당하는

페이지를 만들고 라우팅 설정까지 추가해보자.


import { useParams } from "react-router-dom";

const Edit = () => {
  const params = useParams();
  return <div>{params.id}번 일기 수정페이지 입니다.</div>;
};

export default Edit;

공통 컴포넌트를 만들 때 사용했던 컴포넌트는

모두 지우고 App컴포넌트 내부에는 라우터만 존재하게 하자.


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

3. 일기 데이터 상태 만들기

감정 일기장의 주된 기능은 일기 상태를 관리하는 것이다.

따라서 기능 개발을 위해 가장 먼저 해야 할 것은 상태를 만드는 것이다.

이 프로젝트에서는 useReduce로 상태를 관리해보자.

우선 훅을 추가하고 새로운 상태 객체를 만들어주자.


const [data, dispatch] = useReducer();

그리고 useReducer가 수행할 함수인 reducer를 컴포넌트

외부에 만들어주자.

이 함수는 state와 action이라는 매개변수를 가지고

일단은 상태를 그대로 반환하게 만들어주었다.


function reducer(state, action) {
  return state;
}

다음으로 이 함수를 useReducer의 첫 번째 인수로 넣고,

두 번째 인수는 리스트 형태로 데이터가 들어갈 예정이니

빈 대괄호를 임시로 넣어주자.


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

초기값으로 넣어줄 상태를 모델링해보자.

마찬가지로 컴포넌트 외부에서 목업데이터를 만들자.

하나의 일기 객체 안에는 작성날짜, 감정상태, 일기내용이

들어간다. 여기에 각 일기가 구분될 수 있도록 id 값을 더해

총 네 개의 키를 가진 객체로 하나의 일기 상태를 만들자.

작성 날짜는 타임스탬프를 사용했다.


const mockData = [
  {
    id: 1,
    createdDate: new Date().getTime(),
    emotionId: 1,
    content: "1번일기내용",
  },
];

마찬가지로 두 개 정도 임시 데이터를 더 만들어주자.


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

다음으로 현재 상태의 초기값으로 넣어주자.


const [data, dispatch] = useReducer(reducer, mockData);

목업 데이터가 초기값으로 잘 들어가 있다!