React - 개인 숙련 프로젝트(Account-Book) 회고

이번 개인 프로젝트는 총 3단계에 걸쳐 코드를 propsDriling, Context, Redux 순서로 만든다. 전역관리에 대한 이해(?)를 위해서인지는 몰라도 생각 보다 빡셌다는 것만 기억에 남는다.. 하하..

제일 기본이 되고 저번 프로젝트에도 써먹었던 propsDriling으로 제일 먼저 시작했다.

이전에 컴포넌트 분리에 대해 많은 어려움을 겪었고 당시 TIL을 쓰는 와중에도 이해에 대한 부분이 많이 낮았었지만, 지금은 이전보단 꽤나 이해가 잘 되고 있어 한 편으론 다행이다라고 생각한다.

주된 설명은 propsDriling으로 하면서 Context,Redux로 작성된 코드는 핵심적 요소만 다루도록 하겠다.
(다 하면 너무 많아..)

import React, { useEffect, useState } from "react";
import { Route, Routes } from "react-router-dom";
import Home from "./pages/Home";
import Detail from "./pages/Detail";
import fakeData from "../public/fakeData.json";
const App = () => {
  // 이 함수 컴포넌트는 전체 애플리케이션의 진입점 역할을 합니다.
  const [accountBook, setAccountBook] = useState(fakeData.itemLists);
  // 이 부분은 회계 데이터를 관리하는 state를 초기화합니다. 초기값은 빈 배열입니다.
  useEffect(() => {
    const storedAccountBook = JSON.parse(localStorage.getItem("accountBook"));
    if (JSON.stringify(storedAccountBook) !== JSON.stringify(accountBook)) {
      localStorage.setItem("accountBook", JSON.stringify(accountBook));
    }
  }, [accountBook]);
  // 이 useEffect 훅은 accountBook 데이터가 변경될 때마다 localStorage에 저장합니다.
  // 의존성 배열에 accountBook이 포함되어 있어, accountBook이 변경될 때마다 effect 함수가 실행됩니다.
  // 먼저 localStorage에서 저장된 accountBook 데이터를 가져오고, 현재 accountBook 데이터와 비교하여 다르면 localStorage에 업데이트합니다.

  const [selectedMonth, setSelectedMonth] = useState(null);
  // 이 부분은 선택된 월을 관리하는 state를 초기화합니다. 초기값은 null입니다.

  return (
    <Routes>
      {/* React Router를 사용하여 두 개의 경로를 정의합니다. */}
      <Route
        path="/"
        element={
          <Home
            accountBook={accountBook}
            setAccountBook={setAccountBook}
            selectedMonth={selectedMonth}
            setSelectedMonth={setSelectedMonth}
          />
        }
      />
      {/* 루트 경로 '/'에 대해 Home 컴포넌트를 렌더링합니다.
          Home 컴포넌트에 accountBook, setAccountBook, selectedMonth, setSelectedMonth 를 props로 전달합니다. */}
      <Route
        path="/:id"
        element={
          <Detail accountBook={accountBook} setAccountBook={setAccountBook} />
        }
      />
      {/* 동적 경로 '/:id'에 대해 Detail 컴포넌트를 렌더링합니다.
          Detail 컴포넌트에 accountBook, setAccountBook를 props로 전달합니다. */}
    </Routes>
  );
};

export default App;

코드에 대한 설명은 주석으로 처리해서 적어놨다
아직은 코드를 보자마자 리뷰가 안 되기에 기재해놔서 눈에 익을 수 있게 해보았다.

useEffect 훅을 사용해 의존성 배열에 accountBook을 넣어 데이터가 변경될 때마다 localStorage에 저장할 수 있게 해보았다.

이 부분은 localStorage에 저장하는 것이기에 기본적인 코드 방식만 알면 생각보다 쉽게 적용할 수 있다.

useState 훅을 사용해서 월을 관리하는 state의 초기값을 null로 초기화 해주면 된다. 쉽죠~~?

제일 중요하다고 생각한 부분!!
react-router를 사용해서 두 컴포넌트를 이어준다
accountBook,setAccountBook,selectedMonth,setSelectedMonth 4개를 props로 Home 컴포넌트에 전달해주고 Detail 컴포넌트에 필요한 accountBook, setAccountBook을 props로 전달하면서 path 경로를 통해 컴포넌트를 렌더링 해주면 된다~!

Home 컴포넌트엔 가계부 정보를 입력하는 HomeForm,Month,MonthItem 3개의 컴포넌트가 있고

App.jsx에서 해줬던 방식과 비슷하게 각 컴포넌트로 뿌려주면 된다.

주석에도 써 있듯이 주어진 데이터에서 특정 월의 데이터를 필터링 후 반환해주게 한다.

Form 컴포넌트에서 사용된 부분들을 간단하게 살펴보자면

구조분해 할당을 이용하여 하나의 객체로 만들어준다.
유효성 검사와 form 태그를 사용했기에 PreventDefault()는 늘 따라오는 것이니 다시 한 번 기억 해주자!
새로운 가계부 정보를 담은 객체를 선언하고 콜백 함수를 사용하여 기존 가계부 정보에 새로운 정보를 추가 해준다.


그러기 위해선 초기값 함수 호출 handleInputReset()은 필수인 거 아시죠~?

input 창 안의 부분도 각각 입력해준다.
이 외에 다른 항목엔 ref를 제외한 형식이 똑같으니 각각에 맞는 값을 입력하여 작성해주면 된다.

Month 컴포넌트에서는 먼저 1~12월 까지의 배열을 선언해주고, 각 월을 선택했을 때 실행될 수 있게 함수를 만들어준다. 이 부분은 생각보다 간단해서 당황한 부분이 없지 않았다..