styled-components error 2 해결

한 개가 끝나니, 또 다른 에러가 발생하였다. 하하 이번 에러는 도무지 알 수가 없고, 구글링해도 나오지 않아서 chatGPT 선생님과 대화를 나눠서 해결한 문제이다. 음하하

어떤 에러일까?

Warning: Received false for a non-boolean attribute show.If you want to write it to the DOM, pass a string instead: show="false" or show={value.toString()}.If you used to conditionally omit it with show={condition && value}, pass show={condition ? value : undefined} instead.

네 뭐라는지 모르겠죠?
저도입니다.

chatGPT 선생님의 왈

React에서는 HTML 요소에 정의되지 않은 프롭(props)을 컴포넌트에 전달하면, 해당 프롭은 자동으로 DOM으로 전달되지 않습니다. 따라서 스타일링된 컴포넌트에서는 이러한 정의되지 않은 프롭들이 자동으로 필터링되어 React 콘솔에 경고가 표시됩니다.

라고 합니다.
HTML 요소에 정의되지 않은 props

그렇다면 HTML 요소에 정의된 props는 무엇일까?

예시로 input 태그의 속성을 알려드리자면
autocomplete , autofocus 등등이 있죠?
이런 정의된 props가 아닌, 정의되지 않은 제 커스텀 props 가 자동으로 DOM으로 전달되지 않는다는 것 같습니다.

해결 방법은 무엇일까?

transient prop (트래지언트 프롭) 사용하기

트랜지언트 프롭은 styled-components 에서 제공하는 $ 접두사를 사용하여 정의되지 않은 프롭을 필터링하는 기능입니다.

제 코드에 사용해보겠습니다. (전 후로 보여드림)

before code

const SelectOptions = styled.ul<SelectBoxProps>`
  position: absolute;
  display: ${({ show }) => (show ? 'block' : 'none')};
  list-style: none;
  top: 37px;
  left: 0;
  z-index: 1;
  width: 100%;
  overflow: hidden;
  padding: 8px 0;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.16);
`;

<SelectOptions show={isShowOptions}>
  {months.map((month) => (
    <Option key={month} onClick={handleOnChangeSelectValue} current={month === selectValue}>
    {month}월
      </Option>
	))}
</SelectOptions>

after code

const SelectOptions = styled.ul<SelectBoxProps>`
  position: absolute;
  display: ${({ $show }) => ($show ? 'block' : 'none')};
  list-style: none;
  top: 37px;
  left: 0;
  z-index: 1;
  width: 100%;
  overflow: hidden;
  padding: 8px 0;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.16);
`;

interface SelectBoxProps {
  $show?: boolean;
  $current?: boolean;
  type?: string;
  selectValue?: number;
  setSelectValue?: Dispatch<SetStateAction<number>> | undefined | void;
}
  
<SelectOptions $show={isShowOptions}>
  {months.map((month) => (
    <Option key={month} onClick={handleOnChangeSelectValue} $current={month === selectValue}>
    {month}월
      </Option>
  ))}
  </SelectOptions>

넵 이렇게 $ 접두사를 사용하니, 오류도 없어지고 확실히 스타일 props 라는 것을 알 수 있어서 훨씬 가독성측면에서 좋더라구요!

결론

$ 접두사를 사용하여 정의된 트래지언트 프롭은 DOM으로 전달되지 않기 때문에 styled-components 에서 경고가 발생하지 않는다!