자고 일어나서 브라우저 콘솔창을 보니 어제 만들어둔 MonthButton.jsx에서 웬 이상한 [Error] React : received true for a non-boolean attribute 오류가 뜨는 것이 아닌가..
구글링을 해보니 이러한 오류가 뜨는 이유는 내가 Styled Components의 컴포넌트에게 props로 전달되기를 희망했던 값이 리액트 혹은 다른 뭔가가 HTML의 Attributes로 DOM을 조작하기를 희망하는 것으로 이해하여 이러한 에러가 난다는 것이었다.
이제 이유를 알았으니 해결을 해야 하는데 styled-components의 공식문서를 보면 2가지 해결방법을 알려주고 있다.
공식문서 인라인 링크
Why am I getting HTML attribute warnings?
링크를 들어가서 살펴보면 2가지 해결 방법을 제시해 주는데 솔직히 1번째 방법이 2번째 방법보다 훨씬 간단한 거 같고 쉬운 거 같아서
5.1버전부터 제공하는 transient props를 사용했다.
사용법은 조건부 스타일링을 주려는 background-color 부분에서 props.active 앞에 $를 붙여주고, StyleMonthButton 안에 active를 적어줄 때도 앞에 $를 붙여주면 끝
에러가 말끔하게 사라지는 걸 볼 수가 있다. 사실 저 에러가 떠도 구현하고자 하는 기능상 문제는 없었지만 콘솔창에 시뻘겋게 띄워져 있는 에러 그냥 지나칠 수 있는 사람이 있..나?
여튼 이젠 헤더 부분 인풋창을 통해 값을 입력하고 등록 버튼을 누르면 아래 리스트 부분에 항목이 추가가 돼야 하는데
예를 들어 날짜를 2024-05-24 이렇게 적으면 입력한 값의 월은 5월이니 5월 버튼을 눌렀을 때 나오게끔 해야 한다.
일단은 useState로 만들어둔 currentMonth와 setCurrentMonth의 기본값을 new Date().getMonth() + 1 코드를 써줌으로써 기본값이 현재의 5월이 되는 것이다
이는 console.log를 찍어보면 5가 잘 뜨는 걸 볼 수 있다.
그리고 해당 Month에 맞게 필터링 되게끔 App.jsx에서 const filteredList에 필터링을 하는 코드를 담아준 뒤, props를 내려준 뒤 List.jsx에서 사용했다.
그 이후, MonthButton.jsx에서 StyleMonthButton의 백그라운드 컬러를 조건부로 보여주기 위해서 
$active는 조건부 스타일링을 위한 코드를, value는 월 형식 지정때문에 코드를 넣어줬다.
이제 한~참 위에서 만들어준 const filteredList를 List 컴포넌트에서 받아준 뒤에 날짜 인풋에 예를 들어 2024-05-24를 입력하고 항목, 가격, 내용들도 입력해준 뒤 등록버튼을 눌러보면 5월 버튼을 클릭했을 시 잘 출력되는 걸 볼 수 있다.
(당연하지만, 날짜 인풋에 2024-05-24를 입력했으니 5월을 제외한 버튼을 누를 시 아무것도 안 나옴)
그나저나 움짤 화질이 왜 이러지 https://convertio.co/kr/ 항상 여기서 했는데 이런 적 처음인데..
내일은 개인 사정이 있어서 시간이 안 되지만 일요일엔 해당 리스트 버튼을 누르면 상세페이지로 이동할 수 있도록 react-router-dom을
사용해봐야겠다. 끄읕
사실 저 에러가 떠도 구현하고자 하는 기능상 문제는 없었지만 콘솔창에 시뻘겋게 띄워져 있는 에러 그냥 지나칠 수 있는 사람이 있..나? -> 저요~ 🙋♀️