스타일 컴포넌트 props 경고 해결하기

스타일 컴포넌트에 props를 전달해 조건부 스타일링을 하던 중 아래와 같은 오류가 발생했다.

• CoinInfoStyle.tsx

export const InfoTabItem = styled.div<{isMatchedPath : boolean}>`
    display : flex;
    justify-content : center;
    align-items : center;
    padding : 1rem 5rem;
    background-color : rgba(0, 0, 0, 0.7);
    border-radius : 1rem;
    margin-top : 2rem;
    // 중첩 라우팅 요소 중 현재 경로의 요소만 강조색상
    color : ${(props) => props.isMatchedPath ? props.theme.empTxtColor : props.theme.textColor};
`

• Coin.tsx

<InfoTabBox>
  <InfoTabItem isMatchedPath={priceRouteMatch !== null}>
    <Link to={`/${coinId}/price`}>
      가격
      </Link>
      </InfoTabItem>
      <InfoTabItem isMatchedPath={chartRouteMatch !== null}>
      <Link to={`/${coinId}/chart`}>
		차트
	  </Link>
	</InfoTabItem>
</InfoTabBox>

경고 문구대로 props를 소문자로 지정하여 해결이 되었지만 다른 방법이 있을 것 같아 찾아보았다.

위 경고 문구가 나오는 이유는 isMatchedPath라는 props를 스타일 컴포넌트 내부에서만 사용하고 HTML 요소에는 전달되지 않아야 하기 때문이다.

해결방법은 $ 접두사를 사용하는 것이다.

$ 접두사를 사용하면 해당 props가 transient props임을 명시하는 것이다.

transient props가 되면 해당 props는 스타일 컴포넌트의 스타일을 위해 사용되지만 실제 DOM 요소로는 전달이 되지 않기 때문이다.

해당 경고는 아래와 같이 해결할 수 있다.

• CoinInfoStyle.tsx

export const InfoTabItem = styled.div<{$isMatchedPath : boolean}>`
    display : flex;
    justify-content : center;
    align-items : center;
    padding : 1rem 5rem;
    background-color : rgba(0, 0, 0, 0.7);
    border-radius : 1rem;
    margin-top : 2rem;
    // 중첩 라우팅 요소 중 현재 경로의 요소만 강조색상
    color : ${(props) => props.$isMatchedPath ? props.theme.empTxtColor : props.theme.textColor};
`

• Coin.tsx

<InfoTabBox>
  <InfoTabItem $isMatchedPath={priceRouteMatch !== null}>
    <Link to={`/${coinId}/price`}>
      가격
      </Link>
      </InfoTabItem>
      <InfoTabItem $isMatchedPath={chartRouteMatch !== null}>
      <Link to={`/${coinId}/chart`}>
		차트
	  </Link>
	</InfoTabItem>
</InfoTabBox>

참고

스타일 컴포넌트 props 경고 해결
스타일 컴포넌트 공식문서 - transient props