⚠️ warnig: React does not recognize the "something" prop on a DOM element.
styled-component를 사용하다가 배경 이미지를 props로 처리해야 했는데 !! 콘솔을 보니 갑자기 ⚠️에러⚠️가 와장창
엉엉 뭐라는거죠
당황하지 말고 잘 읽어보면
lowercase가 보인다.
음 .. 소문자로 써야 하나 .. 하지만 난 카멜표기 하고 싶은걸 ..
그래도 소문자로 바꿔보자
그래도 warning이 뜬다 ...
역시 이유를 제대로 알아야겠다
다시 첫 warning으로 돌아가보자.
⚠️ 리액트는 Dom 요소에 Prop된 "backgroundImageUrl"을 인식하지 못한다. 의도적으로 커스텀하여 dom에 표시하려면 소문자로 작성하고 만약 실수라면 지워라!
React는 Dom 요소로 전달되는 모든 props들이 유효한 HTML 속성이어야 하는데 정의되지 않은 속성으로 작성해 에러가 뜬 것이다.
실제로 HTML에서 속성 이름은 모두 소문자로 작성해야 한다.
React에서는 camelCase를 사용하여 prop을 정의하지만, 이러한 prop은 실제로는 해당 DOM 요소에 대한 속성으로 전달된다.
React 컴포넌트에서 사용자 정의 속성을 정의하여 해당 prop을 DOM 요소로 전달하는 경우, React는 해당 속성이 HTML 표준 속성이 아니라고 판단하여 경고가 발생하는 것이다.
그렇다면 .. 소문자로 써야 하는가..? 그래도 노란색 경고가 보기 싫고 나는 ... camel이 편한걸!!!
다행하게도 방법이 있다.
transient props
style-componenets에서 제공하는 특별한 종류의 props로 이러한 속성을 가지고 있으면 컴포넌트의 스타일에만 영향을 미치고, DOM요소로 전달되지는 않는다. 즉, 스타일링에만 사용되고 HTML에는 나타나지 않기에 경고를 없앨 수 있다.
일반적으로 styled-components에서 props를 사용해 스타일을 동적으로 조정할 때, props는 HTML 요소의 속성으로 전달된다.
하지만 transient props (일시적 속성)을 사용한다면 해당 props가 스타일링에만 사용되도록 설정할 수 있다.
사용 방법은 간단하다. 선언부와 호출부에 $를 사용하는 것이다!
이렇게 하면 더이상 콘솔에 보기 싫은 에러가 나오지 않는다!!
얏호
참고 자료
