Styled-Components의 transient props ($ 기호로 prop 사용하기)

* Styled-Components란?

React 개발에서 styled-components를 사용하면 html 태그와 스타일(css)속성을 하나의 컴포넌트로 묶어 사용할 수 있게 되어 요소 하나하나의 스타일 관리를 조금 더 체계적으로 할 수 있다.

컴포넌트 기반으로 관리되므로 일반 React 컴포넌트와 비슷하게 props를 전달하여 여러가지 조건과 변수에 따른 동적 스타일링이 가능하다는 장점이 있다.

또한 CSS-in-JS의 특징을 자연스럽게 가지게 되므로 HTML, CSS, JS를 한곳에서 관리하게 되어 유지보수성와 컴포넌트 재사용성이 증가한다.

 

 

styled-components로 개발을 하다보면 정상적으로 작동을 하고있음에도 아래와 같은 경고가 발생할때가 있다.

React does not recognize the `isActive` prop on a DOM element.

* isActive 자리에는 styled-components의 props명이 들어가게 된다.

 

경고의 원인과 해결방법을 알아보자.

 

 

1. 에러의 원인

styled-components는 HTML 요소와 CSS 속성을 한곳에 모아서 관리하는 일종의 컴포넌트이다. 이 컴포넌트에서 props를 전달할때는 아래와 같은 방법을 사용하게 된다.

//TypeScript
const CustomDiv = styled.div<{isActive :boolean}>`
  opacity: ${(props) => props.isActive ? "1" : "0"}
`

function Test() {
  return (
    <>
      <CustomDiv isActive=true />
    </>
  )
}

 

여기서 생성된 CustomDiv는 DOM에 실제로 생성될때는 div태그로 생성되며 div태그 안에 isActive라는 속성이 들어가게 된다.

하지만 isActive라는 속성은 HTML div태그에 사용할 수 있는 표준 속성이 아니다. 즉 HTML로 변환된 이후의 CustomDiv 부분은 잘못된 코드가 되는것이다.

 

 

2. 해결방법 (transient props)

styled-components는 transient props 기능을 제공한다.

 

styled-components: transient props

styled-components: API Reference

 

transient props는 쉽게말해 React의 styled-components 내부에서만 props가 사용되고 실제 DOM 요소로는 해당 속성이 전달되지 않도록 해준다.

 

이는 $표시를 props 이름 앞에 붙여서 간단하게 사용할 수 있다.

 

위에서 경고가 발생했던 코드를 수정하면 다음과 같다.

 

//TypeScript
const CustomDiv = styled.div<{$isActive :boolean}>`
  opacity: ${(props) => props.$isActive ? "1" : "0"}
`

function Test() {
  return (
    <>
      <CustomDiv $isActive=true />
    </>
  )
}

 

transient props를 이용해 간단하게 해결할 수 있다.