[React]-ToDo List 에러정리

1. props 에러

Warning: React does not recognize the `darkMode` prop on a DOM element. 
If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `darkmode` instead. 
If you accidentally passed it from a parent component, remove it from the DOM element.

투두리스트 다크모드 구현 관련 코드에서 갑자기 props 에러가 떴다. 구글링 해봤더니 props를 DOM element에 직접 전달하지 말라는 뜻인 것 같은데, 일단 에러메세지를 확인해보니 spell it as lowercase라고 나와있길래 darkMode에서 darkmode로 바꿨더니 이 에러는 사라졌다.

그런데 대신 다른 에러가 뜨기 시작했다..

2. non-boolean attribute 에러

Warning: Received `false` for a non-boolean attribute `darkmode`.

If you want to write it to the DOM, pass a string instead: darkmode="false" or darkmode={value.toString()}.

If you used to conditionally omit it with darkmode={condition && value}, pass darkmode={condition ? value : undefined} instead.

이건 또 뭔가 해서 구글링 해보니,, styled-components를 쓸 때 많이 뜨는 에러인 것 같다.
직역하면 불리언 타입이 아닌 속성에 false 값을 받아들였다는 것이라, 값을 string 형태("false") 로 제공하라고 말한다.
근데 이게 뭔.. darkmode 불리언 타입 맞는데,, ㅜㅜ
찾아보니 style에 props를 전달할 때 자주 발생하는 문제인 듯 해서 스타일 지정한 부분이랑 props 전달하는 부분 다 주석 처리 해놓고 하나하나 확인해보니,,

export default function Head({ filters, filter, onFilterChange }) {
  const { darkmode, toggleDarkMode } = useDarkMode();
  return (
    <>
      <div className={styles.wrapper} darkmode={darkmode}>
       ...
      </div>
    </>
  );
}

Header 컴포넌트에 리턴 부분 최상단 div에 내가 style에서 전달한 props가 없는데 darkmode={darkmode} 라고 적어서 생긴 에러였다.
요 한줄 때문에 삽질 많이 했는데 앞으로는 좀 더 꼼꼼히 확인하자..!하핳