Transient props란 무엇인가?

발생한 문제

styled-components에서 styled component에 전달된 props 중에서 HTML 요소에 해당하지 않는 (props로 전달되지 않는 isDarkMode와 같은 속성이 감지됐다.)는 경고 메시지를 만나서 해결하려고 합니다.

즉, 해당 속성은 브라우저에 직접 적용되지 않는데도 전달되고 있다는 뜻입니다.

 

Transient props

styled-components에서 styled component에만 전달되고 HTML에는 전달되지 않는 props를 생성할 수 있습니다. 이를 위해서는 '$' 접두사를 사용하면 됩니다.

결론은 프롭이 스타일시트에만 필요하고 DOM으로 프롭을 전달할 필요가 없다면 '$'명시적으로 붙여서 사용할 필요가 있다는 것입니다.

 

해결한 코드

const TodoText = styled.span`
...
`;

const Todo = ({ $completed, $isDarkMode, ... }) => {
  return (
    <TodoItem>
      <TodoText
        $isDarkMode={$isDarkMode}
        $completed={$completed}
      >
        {textTodo}
      </TodoText>
    </TodoItem>
  );
};

export default Todo;

 

Transient props 사용 시 주의사항

• 다른 곳에선 사용되지 않고 스타일드 컴포넌트에서만 사용합니다.라는 뜻
• 우리가 사용하는 스타일 태그 <MyStyledInput />을 구조적으로 보면 <input class="MyStyledInput" />과 같다.
• 동적으로 값을 전달하는 프롭에는 사용하면 문제가 발생할 수 있습니다.
• '$변수값'을 지정했기 때문에 프롭으로 받아오고 사용할 때에도 '$변수값'을 정확히 명시해야 한다.