[react] styled-component props 경고 메시지 consider using transient props (`$` prefix for automatic filtering.)

Question

안뇽하세요.react와 styled component를 사용하여 개인 프로젝트를 진행중에 있는데요, styled component를 사용할때 propf를 보내 사용할때 consider using transient props ($ prefix for automatic filtering.) 이런 경고메시지가 가끔 뜨던데,import React from 'react'; import styled from 'styled-components'; const StyledDiv = styled.div` background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), ${props => `url(${props.$imageurl})` || 'none'}; background-size: cover; background-position: center; ... `; const SlideItem = ({ imageurl, title, description }) => { return (

{title}

{description}

); }; export default SlideItem;위처럼 보내는 props앞에 $를 붙여주면 경고메시지가 없어진 합니다.imageurl → $imageurl근데 이게 맞는 해결 방법인지 궁금합니다..stackoverflow같은거 찾아보면 이렇게 $를 붙이는 방법이 transient props라고 하는데 해당 컴포넌트에 중요한 props가 아니라 스타일 지정과 같은 일시적인 소품으로서 스타일 지정된 구성요소에만 명시적으로 사용되는 props라고 리엑트에게 알려줘 경고메시지를 숨기는 건가요?근데 애초에 props를 절달하는 방법이 잘못된건지 ㅜ 그렇가면 props앞에 $를 붙이는 것 외에 다른 근본적인 해결방법이 있는건지 궁금합니다 ㅜ리엑트 고수님 뉴비 좀 도와주세요 ㅜ🥹🥹🥲

메이플비 · Answer

const MyStyledInput = styled.input` border: ${props => props.error ? '1px solid red' : '1px solid green'}; `; 위와같은 방식으로 코드를 짜면 error라는 프랍을 스타일링에만 이용되는게 아니라 그걸 넘어서서 브라우저상에서 보면이렇게 error가 input의 attribute로 들어가게 됩니다.그래서 트렌지언 프랍이라는게 나왔는데 $붙여서 트렌지언 프랍으로 사용하면, 스타일드컴포넌트 상에서 얘를 필터링 해서 기본이 되는 DOM으로 프랍을 전달하지를 않습니다. (transient뜻 자체가 short-lived입니다)이거 나오기 전에는 const { error, ...restProps } =props; 라고 error만 따로 빼서 쓰고, props를 전달하는 대신에 restProps라고 필터링된 프랍을 전달하는 방식을 썼었습니다.최근 컨벤션은 저렇게 프랍이 돔까지 내려가서 문제가 되든 안되든 그냥 스타일드컴포넌트에서만 사용하는 프랍은 명시적으로 저렇게 하는 경우가 많습니다. '얘는 다른데선 안 쓰고 스타일드 컴포넌트에서만 씁니다'라고 아에 딱 표시를 하는거죠

[react] styled-component props 경고 메시지 consider using transient props (`$` prefix for automatic filtering.)

1개의 답변

Q&A 목록