가계부 만들기 2

현 오후 12시 36분.

 

지금까지 입력 값을 받아서 맞는 달에 뿌리기 + 빈 값으로 저장하려고 하면 alert 띄우기를 했다.

 

어제 인풋 입력 값을 가져오는 건 하고 티스토리에 안 썼는데 이것부터 정리하자면~

 

먼저 form에 onSubmit을 준다. 그리고 함수를 만들어서 제출할 때 실행되도록 했다.

 const submitForm = (e) => {
    e.preventDefault();
    const newItem = {
      date: dateValue,
      item: itemValue,
      amount: amountValue,
      description: descriptionValue,
      id: uuidv4(),
    };

제일 먼저 e.preventDefault(); 를 사용해서 새로고침을 막는다.

그리고 새로운 객체를 생성하는데, 각각 인풋마다 다르게 준 value를 키와 값으로 저렇게 넣어준다.

id는 uuid 라이브러리를 이용해서 넣어줬다.

 

if (dateValue && itemValue && amountValue && descriptionValue !== '') {
      setItemList((prev) => [...prev, newItem]);
      setDateValue('');
      setItemValue('');
      setAmountValue('');
      setDescriptionValue('');
    } else {
      alert('값을 모두 입력해주세요');
    }
  };

 

그리고 조건문을 넣어서 값이 모두 빈 값이 아니어야 화면에 표시될 수 있도록 했다.

화면에 표시한 후에는 인풋 창을 비워주고!

 

빈 값이 있다면 alert가 뜬다.

 

여기까지는 어제 도움 받아서 한 거고, 오늘 한 것!

 

---

 

이제 입력한 값을 띄워줘야 하는데, 달과 비교해서 그 달을 클릭했을 때 뜨도록 해야 한다.

 

순서가 머릿속에서 정리가 안 돼서, 처음엔 일단 map으로 가져와서 뿌리는 것만 했는데

 

필터를 먼저 걸어야 한다.

 

다른 파일을 만들어서 saveMonth, itemList를 가져와서 사용했다.

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

그리고 인풋 값에 입력한 date는 잘라서 입력한 '달'과 비교해서 맞으면 반환한다.

 

todo 만들었던 코드를 보면서 작성해서 조금 헷갈리긴 했는데... 일단 고.

 

이제 화면에 뿌려주기 위해서는 저 filterList를 가져와서 다시 map을 돌려줘야 한다.

 

이제 map도 조금 편하게 쓸 수 있게 된 것 같다.

 

{filterList.map((item) => {
          return (
            <Box key={item.id}>
              <Box2>
                {item.date} {item.item}
              </Box2>
              <Box3>
                {item.description} {item.amount}원
              </Box3>
            </Box>
          );
        })}

 

이제 필터된 걸 뿌려준다.

 

---

 

이제 추가로 기본값을 현재 달로 변경 + 인풋 값을 입력하면 입력한 달로 이동하도록 수정했다.

 

기본값 변경은 아주 간단하다.

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

 

그냥 숫자 5만 넣어줬다. 이것저것 할 게 많아서 더 신경쓰진 않았고...

 

입력한 달로 이동하는 건 조금 알 듯 말 듯 하면서 헷갈렸는데

 

먼저 함수를 이용해야 한다.

 

그러니까 인풋 값을 입력했을 때 입력한 달로 이동해야 하는 거니까

 

form 태그의 onSubmit 함수에 넣어야 한다.

 

const MonthSaveFunc = (month) => {
    setSaveMonth(month)
    }

 이 함수는 원래 다른 파일에서 

 

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

이렇게 달을 뿌려주는 맵과 같이 쓰였었는데 여러 파일에서 사용하기 위해 상위로 옮겼고

 

const date = parseInt(newItem.date.slice(6, 7));
    MonthSaveFunc(date);

 

onSubmit에 입력받은 date를 가져와 잘라서 숫자로 변환한 뒤 함수로 전달하면~!!!

 

끝.