[React] styled-components로 커스텀한 버튼 Link에 적용하기

모듈화한 버튼을 Link로 사용하고자 하는데 적용이 안되는 경우

버튼을 모듈화해서 사용하다가 Link로 사용하려고 하는데 아래와 같은 에러가 발생했다. 모양은 똑같은데 다른 태그에서는 적용이 안되는 건지에 대한 해답을 찾아보았다.

import Button from "../src/module/Button/Button"
// 모듈화한 버튼을 import 한다.

function App(){
	return (
    	<>
        	{/* 여기서 모듈화한 Button과 Link를 함께 사용해야 하는 상황 */}
        </>
    )
}

export default App;

"Button is not a styled component and cannot be referred to via component selector."

 

어떻게 해결해야 하는지 공식문서를 찾다가 이런 해결 방안을 찾았다. 스타일이 지정되어 있는 컴포넌트를 사용하는 태그 또는 컴포넌트를 변경해야 하는 경우, 즉 a 태그와 스타일된 컴포넌트를 함께 사용하는 경우에 사용하는 방법으로 이러한 경우에는 "as" polymorpphic prop을 사용하면 된다는 것을 확인할 수 있다.

 

as='a', polymorphic props

이 프로퍼티를 사용하면 const 스타일컴포넌트명 = styled.button 일때 버튼으로만 사용해야 하는가에 대한 해답을 찾을 수 있다. Button tag를 명시했지만, a tag로 사용하고 싶을때 또는 다른 함수를 호출하고싶을때도 as를 사용하면 가능하다. 이전 버전에서는 withComponent나 .extend 를 사용했지만 이제는 as를 사용한다고 한다.

 <LinkButton as="a" href="/">링크가 연결되는 버튼입니다.</LinkButton>

이런 형태로 as프로퍼티를 사용 시, 원하는 custom button을 Link로 사용할 수 있게 된다.

 

import Button from "../src/module/Button/Button"

function App(){
	return (
    	<>
        	<Button as="a" href="/">메인페이지로 이동</Button>
        </>
    )
}

export default App;

이런 식으로 사용하면 에러 해결 !

 

https://styled-components.com/docs/api#as-polymorphic-prop