2024. 5. 30. 리액트 숙련 과제 그로스

과제 해설을 보며 모든 기능을 추가했으나, redux 는 끝내 리팩토링 하지 못했다.

 

과제를 완성시키지 못하고 제출한건 처음이라 자존감이 많이 떨어지기도 하지만

 

지금 내가 익힐 수 있는 것들에 집중하려고 한다.

 

지금까지 구현한것들도 다시 해보라고 하면 버벅거릴 것이 분명하기 때문에.

---

 

  const filteredExpenses = expense.filter(

    (expenses) => expenses.date.split("-")[1] === month

  );

 

월별 조회 리스트를 구현하며 알게 된 정보

 

나는 date input type 을 text 가 아닌 date 로 했기 때문에 과제 해설과는 달라 조금 당황을 했었지만, 주위 자문을 구해 해결할 수 있었다.

 

해결 방법은, date 로 가져온 정보들은 num 으로 찍히는것이 아닌 string 으로 찍히는 것. (2024-05-30) 이런 식으로.

 

그럼 여기서 고민을 해볼 수 있다. 이 문자열에서 month 부분만 따로 뺄 수 없을까? 하다가

 

filter 함수 내에 date.split("-")[1] === month 라고 사용해서 해결할 수 있었다.

 

코드를 간단하게 해석하자면, filterdExpense 는 expense (지출목록데이터) 를 filter 함수로 반복해주고, 그 과정에서 각 expenses 객체의 date 속성을 가져와  split("-") 메서드를 사용하여 문자열을 - 기준으로 나눠준다. ( date 가  (2024-05-30) 식으로 찍히기 때문) 나눈 문자열 배열에서 [1] 번째. (0번째는 2024, 1번째는 05 , 2번째는 30이다.) 요소는 month 를 나타낸다. 이 월이 주어진 month 변수의 값과 일치하는 지 확인하고, 일치하는 요소들만 filteredExpenses  배열에 저장한다.