styled-component에서 Link를 어떻게 사용할까

개요

React에서 페이지를 넘어가기 위한 방법 중 하나로 react-router-dom의 Link를 사용하곤 한다.

// import
import { Link } from 'react-router-dom';

현재 프로젝트에서 css in js 라이브러리 중 하나인 styled-component를 사용하고 있는데 페이지를 넘어가려고 Link를 사용하려고 하였고 다음과 같이 작성하였다.

// x
const StyledLink = styeld.Link``;

하지만 Link 컴포넌트는 이렇게 사용 할 수 없음으로 다음과 같이 작성하자.

// o
const StyeldLink = styled(Link)``;

자세한 내용은 공식 문서에서 확인 할 수 있다
https://styled-components.com/docs/basics#styling-any-component