Received `true` for a non-boolean attribute. 에러

Warning: Received true for a non-boolean attribute primary.
If you want to write it to the DOM, pass a string instead: primary="true" or primary={value.toString()}.

개인 토이프로젝트를 진행하면서 styled-components를 학습중이었는데
아래 코드에 대해 에러가 발생하였습니다.

const Button = styled.button`
  font-size: 16px;
  height: 40px;
  padding: 0 20px;
  border-radius: 5px;

  color: ${props => props.color};
  background: ${props => props.background};

  ${props =>
    props.primary &&
    css`
      color: white;
      background-color: #d74521;
    `}
`;

<Button $primary>저장</Button>

원인 및 해결

에러의 원인은 HTML DOM 요소에 비표준 속성이 첨부되고 있기 때문입니다.

HTML 표준 속성이 아닌 속성을 사용하면 에러가 발생한다는 것.
5.1 버전부터는 props 앞에 $를 붙여 props가 실제 DOM 요소로 렌더링 되는 것을 방지해 줍니다.

// transient props
const Comp = styled.div`
  color: ${props =>
    props.$draggable || 'black'};
`;

render(
  <Comp $draggable="red" draggable="true">
    Drag me!
  </Comp>
);

자세한 내용과 다른 해결 방법은 공식문서에서 확인할 수 있습니다.

저는 아래처럼 수정해서 해결했습니다:)

// 수정 후
${props =>
    props.$primary &&
    css`
      color: white;
      background-color: #d74521;
    `}

<Button $primary>저장</Button>