[2024.05.23] styled-components unkowns prop "background" 오류 해결(Transient Props)

프로젝트를 하던 중 아래와 같은 경고 문구를 만났다. 코드가 작동은 원활하게 잘 되는데, 경고 문구가 떠있는 건 뭔가 찜찜해서 해결해보고자 하였다.

※ 에러 발생

이게 무슨 오류..?

명확한 오류 지점이 있으면 디버깅을 해보겠는데, 딸랑 경고문구 하나라 문제를 찾기 어려워 튜터님께 도움을 구했다.

경고가 뜬 styled-components 1

경고가 뜬 styled-components 2

※ 해결 방법

 

문제는 background가 알수 없는 props라고 하는 점이었는데, React 내부적으로 background라는 임의의 키워드를 사용하고 있어 중복되는 문제였다. 때문에 DOM에 접근하는 게 아닌 스타일 시트에만 사용하는 키워드이기 때문에 background 앞에 $을 명시적으로 붙여 사용하니 경고 문구가 사라졌다!(해결해 주신 튜터님께 무한 감사를...)

 

=> Transient Props?

이 방법을 Transient props라고 하며, 위의 방법처럼 '$'을 붙여  styled-components에서 styled component에만 전달되고 HTML에는 전달되지 않는 props를 생성할 수 있다고 한다.