React Router에서 화면을 전환할 때는 a 태그가 아니라 Link를 사용해야만 한다. 헌데 어째서 그럴까? Link는 무엇을 하는 녀석이고, a 태그를 사용해서는 안 되는 이유는 무엇일까?

Link를 쓰세요…그런데 왜?

먼저 Link의 특성은 다음과 같다.

  1. Link는 Reack-Router-Dom의 ‘컴포넌트’이다.
  2. Link는 to 속성으로 이동할 경로를 지정한다.
  3. Link는 브라우저의 주소를 바꿀 뿐, 페이지를 새로고침하지 않는다.


세 번째 특성이 중요하다. Link는 페이지를 새로고침하지 않는다. 반면에, a 태그는 브라우저의 주소를 바꾸면서 페이지를 새로고침한다.

페이지의 새로고침은 React에서 가급적 자제해야 한다. 페이지가 새로고침되면 현재 렌더링 된 컴포넌트가 사라지고 새로운 렌더링이 발생하기 때문이다. 즉, 기존 컴포넌트에 설정된 state가 모두 소멸해버린다.

그러므로, 새로고침이 특별히 필요한 경우가 아니면 Link를 사용해야 한다. Link는 HTML5 History API를 사용하여 브라우저의 주소만 바꿀 뿐, 페이지를 새로고침하지 않는다. 필요한 컴포넌트와 state를 유지한 채로 화면이 전환된다. React가 Single Page Application으로 동작하는 데 아무런 문제가 발생하지 않는다.

사용 방법

Link를 사용하려면 우선 React-Router-Dom을 설치해야 한다. PowerShell에서 다음의 명령어를 적으면 된다.

npm i react-router-dom

시연 코드를 작성해보았다. li 태그인 Home, LogIn, LogOut에 Link를 적용하였다. 클릭하면 각각 화면이 전환된다.

import React from "react";
import { Link } from "react-router-dom";
const Nav = () => {
  return (
    <nav>
      <h3>목차</h3>
      <ol>
        <Link to='/'>
          <li>Home</li>
        </Link>
        <Link to='/login'>
          <li>LogIn</li>
        </Link>
        <Link to='/logout'>
          <li>LogOut</li>
        </Link>
      </ol>
    </nav>
  )
};
export default Nav;


아래는 상위 컴포넌트이다. BrowserRouter, Routes, Route 태그를 함께 사용해야 한다.

import React from "react";
import Nav from "./Nav";
import Login from "./login";
import Logout from "./logout";
import { BrowserRouter, Route, Routes } from 'react-router-dom';

const App2 = () => {
  return (
    <div className="App2">
      <BrowserRouter>
        <Nav />
        <Routes>
          <Route path="/login" element={<Login />} />
          <Route path="/logout" element={<Logout />} />
        </Routes>
      </BrowserRouter>
    </div>
  )
};

export default App2;

사용 방법은 간단히만 다루었다. v6 업데이트 등 기술이 빠르게 변화하므로 React Router의 공식문서를 참조하는 것을 추천한다.
React Router 공식문서

참고자료

https://reactrouter.com/docs/en/v6
https://gomgomkim.tistory.com

(제 글에서 틀린 것이 있다면 꼭 지적해 주세요. 감사히 배우겠습니다)