24. 05. 27 TIL (props-drilling-1)

어찌저찌 챕터1을 끝냈다. (잉?)

어제 순식간에 진도를 나갔다.

 

그래서 코드를 다시 읽어보려고 하니까 무지 헷갈렸다.........

 

그러므로 챕터 1 코드를 정리할 겸 처음부터 작성해본다.

---

1. 라우터 파일

 

그 전 세팅은 넘기고, 나는 강의대로 Router 폴더를 만들어 라우터 파일을 만들었다.

 

먼저 리액트와 필요한 라이브러리를 가져온다.

import { useState } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from '../pages/Home';
import Detail from '../pages/Detail';

그리고 각각 Home, Detail 페이지를 가져온다.

 const MonthSaveFunc = (month) => {
    setSaveMonth(month);
    localStorage.setItem('month', month);
  };

  function lastMonth() {
    let last = localStorage.getItem('month');
    return last ? Number(last) : 5;
  }
  const [saveMonth, setSaveMonth] = useState(lastMonth);

  const [itemList, setItemList] = useState([]);

여기서는 MonthSaveFunc 함수와 lastMonth함수를 만들고,

saveMonth & itemList useState를 만든다.

 

일단 itemList만 기억하고 setItemList 초기값은 배열인 것을 기억하자. (여러 개의 값을 받아 리스트로 가져오니까!)

 <BrowserRouter>
    <Routes>
      <Route
        path="/"
        element={
          <Home
            saveMonth={saveMonth}
            setSaveMonth={setSaveMonth}
            itemList={itemList}
            setItemList={setItemList}
            MonthSaveFunc={MonthSaveFunc}
          />
        }
      />
      <Route
        path="/detail/:detailId"
        element={<Detail itemList={itemList} setItemList={setItemList} />}
      />
    </Routes>
  </BrowserRouter>
);

자 그러면 BrowserRouter(전체 애플리케이션 경로 관리) 로 Routes(여러 경로 정의)를 감싼다. 

그리고 Route로 각각의 경로를 설정한다.

 

-> `path='/'` 는 기본 경로(홈페이지)다

-> `element={<Home ~/>}` 는 기본 경로에 Home 컴포넌트를 렌더링한다

 

이런 식으로 작성되어 있음. 그리고 내부엔 필요한 속성을 전달한다.

 

---

2. Home 파일

import InputForm from '../components/InputForm';
import MonthBtn from '../components/MonthBtn';
import InputList from '../components/InputList';
import { useState } from 'react';
import SumValue from '../components/SumValue';

 

가져오는 파일을 import 해준다. 

 

홈페이지에 보여야 하는 파일은 모두 가져온다고 보면 된다.

const Home = ({ setItemList, setSaveMonth, saveMonth, itemList , MonthSaveFunc}) => {
  return (
    <>
      <InputForm
        setItemList={setItemList}
        MonthSaveFunc={MonthSaveFunc}
        saveMonth={saveMonth}
      />
      <MonthBtn
        setSaveMonth={setSaveMonth}
        saveMonth={saveMonth}
        MonthSaveFunc={MonthSaveFunc}
      />
      <SumValue saveMonth={saveMonth} />
      <InputList
        itemList={itemList}
        saveMonth={saveMonth}
        setSaveMonth={setSaveMonth}
      />
    </>
  );
};

라우터에서 받아오는 프롭스는 저렇게 받아와 넣어주고, 하위에 또 전달해준다.

 

---

3. Detail 파일

import React from 'react';
import DetailPage from '../components/DetailPage';

디테일 파일에서는 디테일 페이지 하나만 가져온다.

 

const Detail = ({ itemList, setItemList }) => {
  return <DetailPage itemList={itemList} setItemList={setItemList} />;
};

마찬가지로 프롭스를 받아서 또 디테일 페이지에 저렇게 내려준다.