24. 05. 29 TIL (props-drilling-3)

5. MonthBtn 파일

 

이 파일은 달 버튼을 만드는 파일이다.

 

먼저 달을 만드려면 배열을 만들어주자.

const months = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

잔

 

그리고 일단 2번으로 간다.

const MonthBtn = ({ MonthSaveFunc }) => {

MonthSaveFunc 함수를 받아오는데 이 함수는 라우터에 있는 함수다.

 

올리기 귀찮으니까 

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

이렇게 생겼다. 일단 더 봐보자.

 

자 보면 MonthSaveFunc 함수가 실행되어 month를 받아와 setSaveMonth에 주고 있다.

(이 setSaveMonth는 라우터에 작성되었다.)

 

로컬 스토리지는 이 클릭한 달을 받아서 저장한다. 이 저장한 것은 마지막에 클릭한 달을 저장하는 건데

다시 가져와서 

 const [saveMonth, setSaveMonth] = useState(lastMonth);

여기 넣어주면 초기값으로 마지막으로 클릭한 달을 가져온다.

 

2.

{months.map((month, index) => {
            return (
              <Button
                key={index}
                onClick={() => {
                  MonthSaveFunc(month);
                }}
              >
                {month}월
              </Button>
            );
          })}

먼저 배열에 있는 숫자를 꺼내려면 map을 돌려야 한다.

months 배열에서 요소 하나하나인 month를 키로 index를 주어 돌린다.

그리고 돌리면서 달 버튼을 뱉어낸다.

 

그리고 이 버튼을 클릭하면? MonthSaveFunc 함수에 month가 전달되어 실행된다.

다시 위로 가볼까...

---

6. SumValue 파일

 

이 파일은 클릭한 달을 가져와 화면에 표시하고, 그 달의 누적 금액을 모아 표시한다.

 

누적 금액을 모은 것까진 안 했고 클릭한 달을 가져와 화면에 표시하는 건 했다.

const SumValue = ({ saveMonth }) => {

먼저 saveMonth를 받아온다. 

 

아까 이 saveMonth하면 무엇이었느냐,

 

바로 위 파일에서 클릭한 달을 가져와 setSaveMonth에 업데이트 시켜주지 않았느냐?

 

그러므로

          <Span>{saveMonth}</Span>
          <Span>월 총 지출:</Span>

이렇게 써주면 끝. 클릭한 달을 표시해준다.

 

---

7. InputList 파일

 

이 파일은 이제 입력한 값을 리스트로 뿌린다.

const InputList = ({ itemList, saveMonth }) => {

먼저 itemList와 saveMonth를 받아오고,

 

(헷갈리니 정리, itemList는 여러 개의 항목들을 담고있는 리스트고

saveMonth는 (클릭했던 달 표시, 사용자가 입력한 값의 달 표시) 등 몇 월인지 표시해주는 숫자다)

 

  const filterList = itemList.filter((item) => {
    const date = parseInt(item.date.slice(6, 7));
    return date === saveMonth;
  });

 

itemList에서 필터를 걸 건데, 먼저 요소 item의 date에서 달을 잘라내어

이 item.date의 달이 saveMonth와 같은지 확인한다.

 

그러니까 사용자가 클릭한 달로 이동할 때, 사용자가 입력한 값에서 달을 추출해서

그 달로 이동할 때 그 달 리스트에 뜨도록 하기 위해 saveMonth와 비교하는 것 (아마도)

 

그래서 맞는 조건인 것을 리턴한다.

즉, 사용자가 선택한 월에 해당하는 항목 전체가 포함된 새로운 리스트가 filterList인 것.

 

자 이제 뿌려줘야 한다.

 

{filterList.map((item) => {
          return (
            <Link
              to={`/detail/${item.id}`}
              style={{ textDecoration: 'none' }}
              key={item.id}
            >
              <Box>
                <Box2>
                  <Span>{item.date}</Span>
                  <Span>항목: {item.item}</Span>
                </Box2>
                <Box2>
                  <Span>내용: {item.description}</Span>
                  <Span>금액: {item.amount}원</Span>
                </Box2>
              </Box>
            </Link>
          );
        })}

이 filterList에 map을 돌린다.

이때 걸려저서 뿌려지는 것들을 클릭하면 상세 페이지로 이동하게 하고 싶으므로

Link 태그를 만든다.

 

뒤에 to={/detail/${item.id}}는 클릭하면 deatil/ 뒤에 항목의 아이디가 붙은 경로로 이동한다.