react : unknown prop error in styled-components

왜 궁금했을까

styled-components 라이브러리를 사용한 프로젝트를 진행중 경고 메시지 하나를 마주쳤다.

렌더링은 잘 되는데, 콘솔창은 빨간색으로 칠해져 있다...
다음으로 위 에러 메시지가 무슨 의미이고, 어떻게 해결할 수 있는지 알아보자.

unknown prop 경고 메시지의 의미

위 오류의 의미는 다음과 같다. 현재 styled-components를 사용하여 스타일링된 컴포넌트에 알 수 없는 속성(isOpen 등)을 DOM 요소로 전달하고 있다. 그리고, 이는 여러가지 문제를 발생시킬 수 있다.
에러 메시지에 나온 대로 button 이라는 DOM 요소에 비표준 속성들이 전달되고 있다.

왜 알 수 없는 속성을 DOM 요소로 전달하면 안될까?

1. DOM 표준 위반
   • HTML 및 SVG 요소에는 특정 표준 속성만 허용된다. 그런데, 알 수 없는 속성을 DOM에 전달하면 브라우저가 이를 인식하지 못하고 무시하거나 예기치 않은 동작을 초래할 수 있다.
2. React 경고 및 오류
   • React는 개발자가 알 수 없는 속성을 DOM 요소에 전달하는 경우 경고를 발생시킨다. 이러한 경고는 콘솔창을 어지럽히고 실제 문제를 파악하기 어렵게 만들 수 있기 때문에 해결해야 한다.
3. 성능 저하
   • 불필요한 속성을 DOM 요소에 전달하면 브라우저가 이를 처리하는 데 추가적인 작업이 필요할 수 있으며, 이는 성능 저하로 이어질 수 있다.

해결 방법

Transient Props를 사용하는 경우

styled-components에서 Transient Props를 사용하여 특정 속성을 DOM에 전달되지 않도록 할 수 있다. Transient Props는 $ 기호를 접두사로 사용하여 정의된다.

Transient Props 사용 이유

1. React 경고 및 오류 방지: React는 DOM 요소에 알 수 없는 props가 전달되면 경고를 표시하는데, Transient Props는 유효한 props만 DOM에 전달되도록 합니다.
2. 깨끗한 HTML 유지: 스타일링에만 사용되는 props를 필터링하여, HTML이 깔끔하고 의미에 맞게 유지되도록 한다.
3. 더 나은 코드 구성: 스타일링과 기능적 부분을 분리하여 코드를 더 유지보수하기 쉽게 만든다.

Transient Props 사용 방법

커스텀 props 앞에 $ 기호를 붙이기만 하면 된다.

이 예제에서 $variant props는 스타일링에 사용되지만, 버튼 요소에 전달되지 않는다.
적용한 뒤, 콘솔창은 깔끔해졌다.

참고 자료:

• Styled Components Documentation
• React Documentation