styled-components에서 Non-Boolean Attribute 오류 해결하기

일을하면서 공부해야할것도, 숙지해야할것도 많아짐에따라

다시 기술블로그를 하나하나 작성해보려고한다!

 

오늘은 React랑 styled-components를 사용하다 보면 마주칠 수 있는 오류 하나를 다뤄볼까 합니다.

오류 메시지: true for a non-boolean attribute

 

`styled-components`를 쓸 때 이런 경고 메시지, 본 적 있나요?

Warning: Received `true` for a non-boolean attribute `isvisible`.

 

이건 isvisible이라는 props가 DOM 요소에 전달됐는데, 이 속성이 boolean 값을 받지 않아서 생긴 문제다.

이런 경우에는 이 props가 DOM에 전달되지 않도록 막아줘야 한다

 

 

 

해결 방법

1. shouldForwardProp 사용하기

 

`styled-components`에서 `withConfig`와 `shouldForwardProp`를 사용해서

특정 props가 DOM에 전달되지 않도록 설정할 수 있다.

 

import styled from 'styled-components';

const RectangleDivRoot = styled.div.withConfig({
  shouldForwardProp: (prop) => prop !== 'isvisible'
})`
  display: ${({ isvisible }) => (isvisible ? 'block' : 'none')};
`;

 

위 코드에서 `shouldForwardProp`을 이용해 `isvisible`이라는 prop이 DOM으로 전달되지 않도록 설정했다

2. 소문자로 설정하기

`shouldForwardProp`에서 prop 이름은 소문자로 일치시켜야 한다. 예를 들어, `isVisible`이 아니라` isvisible`로요. 이렇게 해야 props가 제대로 필터링됩니다.

3. $ Prefix 사용하기: Transient Props

`styled-components` v5.1부터는 Transient Props라는 기능이 추가됐다. 이 기능을 사용하면 prop 이름 앞에`$` 기호를 붙여서 DOM 요소에 전달되지 않도록 할 수 있어요. 이 방법으로 boolean props로 인한 경고 메시지를 피할 수 있습니다.

import styled from 'styled-components';

const RectangleDivRoot = styled.div`
  display: ${({ $isvisible }) => ($isvisible ? 'block' : 'none')};
`;

위 예제에서` $isvisible`이라는 prop은 DOM에 전달되지 않고, styled-components 내에서만 사용됩니다. 이렇게 하면 불필요한 경고 메시지를 피할 수 있다

 

 

마무리

`styled-components`를 사용할 때 boolean props가 DOM 요소로 전달되지 않도록 하는 건 정말 중요하다 `shouldForwardProp`과 `Transient Props`를 잘 활용하면 이런 문제를 쉽게 해결할 수 있습니다. 앞으로 스타일링할 때 이런 팁을 활용해 경고 메시지 없이 깔끔한 코드를 작성해 보자

 

p.s. 내코드

const RectangleDivRoot = styled.div.withConfig({
  shouldForwardProp: (prop) => prop !== "isvisible",
})`
  position: absolute;
  box-shadow: var(--inner-shadow-600);
  border-radius: 20px;
  background-color: rgba(3, 7, 14, 0.48);
  border-top: 2px solid var(--miscellaneous-floating-tab-pill-shadow);
  box-sizing: border-box;
  height: 326px;
  z-index: 10;
  width: 130%;
  max-width: 130%;
  padding: 0;
  margin-left: -11px;
  margin-right: auto;
  display: ${({ isvisible }) => (isvisible ? "block" : "none")};

  @media (max-width: 768px) {
    height: auto;
    margin-left: -20px;
  }
`;


--------생략
<RectangleDivRoot isvisible={isvisible}>

 

이런식으로 사용하였다.