React : a 태그와 Link 의 차이점, 어떻게 사용해야 할까?

리액트에선 페이지를 불러올때 두가지의 방법이 존재한다

1. <a></a> 사용

a태그를 사용하는 방법은 기존 html을 사용할때 쓰던 방법으로 페이지를 재 렌더링을 시켜줌으로 이동하는 방법이다. 때문에 페이지 이동을 하면서 새로운 데이터를 다시 불러오게 되며 href를 사용해 경로를 지정해줄 수 있다.

2. <Link></Link> 사용

Route 에서 제공하는 Link태그는 싱글페이지 어플리케이션에 맞게 재렌더링 되지 않는 장점이 있다. 때문에, 바뀌어야 하는 화면만 재렌더링 되고 나머지 데이터는 그대로 유지된 채 재사용된다. 그렇기 때문에 데이터를 필요한 부분만 불러들일 수 있어 속도향상에 도움이 된다. link는 to를 사용해 이동한다

import { BrowserRouter, Route, Switch, Link } from "react-router-dom";
import About from "./pages/About";
import Home from "./pages/Home";
import Profile from "./pages/Profile";
import NotFound from "./pages/NotFound";

function App() {
  return (
    <BrowserRouter>
      <Link to="/">Home</Link>
      <Switch>
        <Route path="/profile/:id" component={Profile} />
        <Route path="/profile" component={Profile} />
        <Route path="/about" component={About} />
        <Route path="/" exact component={Home} />
        <Route exact component={NotFound} />
      </Switch>
    </BrowserRouter>
  );
}

export default App;

어떤 의도로 만들어지는가에 따라 사용하는것이 바람직하다고 생각함!