[Styled components] 외부 컴포넌트를 감쌌더니 "Warning: Unknown props" 경고 메시지가 출력된다면

Material UI와 Styled-components를 사용해서 작업을 진행하던 중에 다음과 같은 Warning을 마주했습니다. 경고 메시지 내용은 대략 다음과 같습니다.  "네가 나한테 뭔지 모를 prop을 넘겨줘서 살펴봤는데, 이건 DOM의 attribute은 아니니까 커스텀 attribute으로 넣고 싶으면 소문자로 쓰고 잘못 넣은 거면 지우도록 하자"

 

 

 

스타일드 컴포넌트는 props를 어떻게 다루나

경고 메시지가 나타난 이유는 styled Component가 props를 처리하는 방식 때문입니다. styled component는 모든 props를 DOM 노드까지 전달하는 방식으로 props를 다루고 있습니다. 공식 문서에서는 passed props라는 키워드로 해당 내용을 설명하고 있습니다.

 

다음과 같이 styled Component에 임의의 prop을 전달한다면

 

<ActionArea isCardClickable={isCardClickable} testProp="test Prop">

 

개발자 도구 Elements 탭에서 다음과 같은 testprop이라는 custom attribute이 만들어진 것을 확인할 수 있습니다.

 

 

만약 React Developer Tools이 설치되어 있다면 props가 전달되는 과정을 component별로 확인할 수도 있습니다.

 

정확히 말하면 모든 props가 살아서 DOM 노드까지 전달되는 것은 아닙니다. styled component의 처리 기준에 따라서 표준이 아닌 속성들은 필터링되어서 전달되지 않습니다.

 

"Unknown props"이라는 경고 메시지도 이렇게 props를 전달하는 처리 과정 중에 발생했다는 것을 알 수 있었습니다.

 

 

해결 방법 

해결 방법은 어렵지 않습니다. styled() 생성자를 이용해서 기존 컴포넌트의 스타일을 확장할 때, 이렇게 새로 만들어진 컴포넌트의 특정 prop이 DOM까지 전달되지 못하게 만들면 됩니다. 문제가 생겼던 prop을 제외한 나머지 props만 전달해주면 경고 메시지 없이 정상적으로 작동합니다.

 

const ActionArea = styled(({ isCardClickable, ...rest }) => (
  <CardActionArea {...rest} />
))`
  pointer-events: ${({ isCardClickable }) =>
    isCardClickable ? "auto" : "none"};
`;

 

 

위의 코드를 조금 더 자세하게 쓴다면 다음과 같은 모습입니다.

 

const CustomComponent = ({ isCardClickable, ...rest }) => (
  <CardActionArea {...rest} />
);

const ActionArea = styled(CustomComponent)`
  pointer-events: ${({ isCardClickable }) =>
    isCardClickable ? "auto" : "none"};
`;

 

확장하려는 기존 컴포넌트를 애초에 특정 props를 처리하지 않는 형태로 만들어, 이 컴포넌트를 확장해서 새로운 styled component를 작성했습니다.