Styled-components: DOM에 전달되는 prop 경고 없애기

기능이 잘 작동되어서 몰랐는데 개발자 모드를 열었더니

알 수 없는 경고문들이 가득한 콘솔창이 날 반겨준다.

 

[경고문 원인]

HTML의 기본요소는 내가 커스텀한  props들을 알지못하는데  DOM으로 직접 전달되서 발생한 경고문이다.

경고문이라서 그냥 넘어갈까 했는데 나중에 팀원이 콘솔창 열었다가 기겁할거같으니 내가 해결해야지 😇

다행히 읽어보니 해결방법이 설명되어있다. 

<CustomRadio
    isChecked={selectedOptions.includes(ex.num)}
    isCorrect={isAnswersCorrect || isAnswerCorrect}
    isWrong={isAnswersWrong || isAnswerWrong}
>

const CustomRadio = styled.span<{ isChecked: boolean; isCorrect: boolean; isWrong: boolean }>`
  width: 2rem;
  height: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 0.5rem;
  color: ${({ isChecked, isCorrect, isWrong }) =>
    isCorrect
      ? "rgb(2, 103, 255)"
      : isWrong
      ? "red"
      : isChecked
      ? "rgb(2, 103, 255)"
      : "black"};
  border-radius: 50%;
  font-size: 1.5rem;
  line-height: 2rem;
  transition: border-color 0.2s, background-color 0.2s;
`;

---

[해결방법]

1.  StyleSheetManager를 사용해서 전체 스타일링 관리 및 props 필터링

• @emotion/is-prop-valid 라이브러리를 설치하면 필터링 로직을 더 정교하게 처리 할 수 있다.

2. transient props(접두어`$`)를 사용해서 해당 prop을 자동으로 필터링

• $ 만 붙이면 자동으로 필터링이된다니 가장 간단해보이잖아?

3. styled-components 자체에 기본적으로 포함된 shouldForwardProp를 사용한 필터링

• props를 명시적으로 지정하여 필터링이 가능하다. 특정 props를 DOM 에 전달되지않도록 세밀한 제어에 유용하다. 

---

[해결]

가장 간단해보이는 prefix $ 를  적용해보았다.

<CustomRadio
  $isChecked={selectedOptions.includes(ex.num)}
  $isCorrect={isAnswersCorrect || isAnswerCorrect}
  $isWrong={isAnswersWrong || isAnswerWrong}
>


const CustomRadio = styled.span`
  width: 2rem;
  height: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 0.5rem;
  color: ${({ $isChecked, $isCorrect, $isWrong }) =>
    $isCorrect
      ? "rgb(2, 103, 255)"
      : $isWrong
        ? "red"
        : $isChecked
          ? "rgb(2, 103, 255)"
          : "black"};
  border-radius: 50%;
  font-size: 1.5rem;
  line-height: 2rem;
  transition:
    border-color 0.2s,
    background-color 0.2s;
`;

 

왜 경고문이 계속 떠있나했는데 저 prop을 엄청 많이 사용하고 있었다.

다바꿔주고 새로고침을 해보니

 

 

깔끔~ 기분굿~