[style-components] props 오류

문제 

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

 

<DeadlineWrapper
isOverdue={work.workDeadline < today}
isDueToday={work.workDeadline === today}
>
{work.workDeadline < today
? "마감날짜가 지난 todo입니다 !"
: work.workDeadline === today
? "오늘까지 끝내야하는 todo입니다 !"
: null}
</DeadlineWrapper>


const DeadlineWrapper = styled.div`
  color: ${(props) =>
    props.isOverdue ? "#e88d8d" : props.isDueToday ? "#FFF1A7" : "inherit"};

  font-size: 0.7rem;
`;

 

이런식으로 마감날짜가 지난 거에 대한건 빨간색, 오늘해당하는건 노란색으로 표현하고자

props로 넘겨서 해당하는 것에 따라 색 변경을 하려 했는데 오류가 떴다. 

 

camleCase로 작성할 경우 리액트는 DOM 요소로 인식하게 되는데, 

리액트에서 isOverdue라는 정의 되지 않은 속성을 사용하려하니 오류가 뜬 것이다. 

 

그래서 camleCase 방식이 아닌 소문자로만 isoverdue로 적어도 경고 문구가뜨는데, 이 경고 문구까지 없애기 위해서 다음과 같은 방법을 사용했다. 

 

 

 

해결

'$' 을 통해 props를 필터링 할 경우 DOM으로 전달 되지 않는다. 

 

<DeadlineWrapper
$isOverdue={work.workDeadline < today}
$isDueToday={work.workDeadline === today}
>
{work.workDeadline < today
? "마감날짜가 지난 todo입니다 !"
: work.workDeadline === today
? "오늘까지 끝내야하는 todo입니다 !"
: null}
</DeadlineWrapper>


const DeadlineWrapper = styled.div`
  color: ${(props) =>
    props.$isOverdue ? "#e88d8d" : props.$isDueToday ? "#FFF1A7" : "inherit"};

  font-size: 0.7rem;
`;

 

위와 같이 $을 추가해주면 오류가 사라지고 적용이 된다 !