Link로 바꿔야 하는데 styled component 이용해서 어떻게...?

평소에 모든 페이지 이동을 useNavigate() 훅을 이용하고 Link 태그를 쓸 생각조차 안했습니다.

하지만 상황에 따라 이 2가지를 나눠 사용하는 것이 좋다고 합니다.

 

자, 일단 useNavigate()와 Link의 차이를 알아봅시다.

useNavigate()

const navigate = useNavigate();

const handelGoDetail = () => {
    if (Object.keys(item).length === 0) {
        return;
    }
    navigate(`/pokemon-detail?id=${item.id}`);
};

 

useNavigate는 웹 페이지 이동 시 추가적인 동작이 필요할 경우에 사용합니다.

위처럼 페이지를 이동하기 전에 실행해야 할 코드가 있다면 사용하면 됩니다.

 

위처럼 item이라는 객체가 비어있다면 early return을 시키는 경우가 있고 많이 볼 수 있는 경우로는 회원 가입 페이지에서 회원 가입 버튼을 누르면 유효성 검사를 실행한 후 로그인 페이지로 넘어가는 경우가 있습니다.

Link

<Link to='/'>Home<Link/>

 

Link 태그는 사용자가 해당 요소를 클릭했을 때 페이지를 이동하도록 합니다.

 

그럼 어차피 둘 다 페이지 이동할 때 쓰니까 아무거나 쓰면 되지 않나 싶을겁니다.

Link를 적재적소에 써야 하는 이유는 바로 SEO(검색 엔진 최적화) 때문입니다.

• <Link>는 실제로 HTML <a> 태그를 렌더링하므로, 검색 엔진이 링크를 따라가며 페이지를 색인할 수 있습니다.
• 이는 사이트의 검색 결과 노출(인덱싱)에 도움을 줍니다.

하지만 useNavigate를 이용해 페이지 이동을 구현한다면?

• 클라이언트 사이드 렌더링 (CSR)
  • useNavigate는 window.history.pushState()를 활용해 클라이언트에서 페이지 전환을 처리합니다.
  • 서버에서 HTML을 제공하는 게 아니라, 현재 페이지의 상태만 변경되기 때문에 검색 엔진이 페이지 전환을 인식하기 어렵습니다.
• 검색 엔진 봇이 탐색 불가
  • useNavigate는 JS 코드 실행 이후 동작하는데, 검색 엔진 봇(Googlebot 등)은 JS 실행을 완벽하게 처리하지 못하는 경우가 많습니다.
  • 즉, useNavigate로 이동하는 페이지는 검색 엔진이 쉽게 크롤링하지 못할 수 있습니다.
• 링크의 의미가 사라짐
  
  • useNavigate는 단순히 상태 변경이므로, 검색 엔진이 새로운 페이지로 이동하는 것인지 알지 못합니다.

이러한 이유로 페이지를 이동하기 전 작업이 필요하지 않는 이상 Link 태그를 이용하는 것이 좋겠죠?

이러해서 Link로 대체할 수 있는 곳을 찾다가 문제에 직면했습니다.

🛑 Styled Component에 Link는 어떻게 적용하지...?

<StDexBtn onClick={() => navigate('/dex')}>포켓몬 도감 시작하기</StDexBtn>


const StDexBtn = styled.button`
    border: none;
    border-radius: 5px;
    color: white;
    padding: 20px;
    background-color: red;
    cursor: pointer;
`;

 

HTML의 a태그랑 react-router-dom의 Link태그가 같은 역할을 하는 것은 알겠는데 styled.a로 쓰면 아예 페이지를 새로 로드하기 때문에 리액트에서 쓰기에는 굳이...? 

 

해결 방법은 간단합니다. 

✅  Styled(Link) 사용

간단하게 react-router-dom의 Link를 styled-domponent로 감싸면 됩니다.

<StDexBtn to='/dex'}>포켓몬 도감 시작하기</StDexBtn>

const StDexLink = styled(Link)`
    display: inline-block;
    text-decoration: none;
    border: none;
    border-radius: 5px;
    color: white;
    padding: 20px;
    background-color: red;
    cursor: pointer;
`;

 

✅  as 속성 사용

styled-components에서 as 속성은 기존 스타일을 그대로 유지하면서 다른 HTML 요소나 컴포넌트로 변경하고 싶을 때 유용합니다.

<StDexBtn as={Link} to="/dex">포켓몬 도감 시작하기</StDexBtn>