[React] 리액트의 <Link>태그

Link 사용 예시

//a tag: 페이지 이동
//홈페이지에 링크 설정해서 프로덕트 페이지로 넘어가게 만듦

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

//가려는 경로를 to 프로퍼티로 지정. 
function HomePage(){
    return (
    <>
      
        <h1>My Home Page</h1>
        <p>
            Go to <Link to="/products">the list of products</Link>.
        </p>
    </>
    );
}
export default HomePage;

 

Link 컴포넌트는 React에서 사용하는 <a>태그라고 할 수 있다.

 

*참고: <a>태그

참고로 <a> 태그란 웹 사이트 내에서 다른 페이지, 또는 같은 페이지의 특정 위치, 또는 그 외 다른 웹사이트의 URL로 연결할 수 있는 하이퍼링크를 만드는 데 사용되는 태그. 

 

href (위치 지정), target(링크 내용을 현재 창에 띄울지 새 창에 띄울지 지정) 등의 어트리뷰트가 있다.

 

<a href=>의 단점

• <a> 태그를 사용하면 속도가 저하됨. 즉, href를 사용하면 상태 값을 잃고 페이지를 새로 불러오면서, 렌더링된 컴포넌트도 모두 새로 렌더링해야 하기 때문. 즉, 속도 효율성이 떨어짐. 

 

<Link> 사용 이유

• 속도 효율성을 위해 새로운 페이지를 불러오는 대신, 브라우저의 주소만 바꾸어 업데이트하는 방식으로 구현하는 것이 더 적절.
• Link 컴포넌트는 HTML5 History API를 사용하여 브라우저의 주소만 바꾸고, 페이지를 새로 불러오지는 않는다.
• 화면만 재렌더링. 나머지 데이터는 그대로 유지된 채 재사용되어 속도향상에 도움이 된다. 

<Link> 특징

href를 사용하는 <a>와 달리 <Link>는 to를 이용하여 이동한다.

 

import {BrowserRouter,Routes, Route, Link} from 'react-router-dom';

임포트해준 후에

<Link to="/category">category 컴포넌트 보여주기</Link>

처럼 사용한다.