[Link] React의 페이지 이동

페이지 이동

• HTML에서 페이지 이동을 위해 기본적으로 사용되는 <a> 태그는 React에서 Link 라는 것으로 대체 됨
• 단, React Link와 HTML <a> 태그의 가장 큰 차이점은 페이지 이동을 하지 않는다는 점
• <a> 태그는 페이지를 새로 고침하면서 이동을 하지만, Link는 페이지를 새로 고침하지 않고 URL 경로만 변경하여 사용자에게는 마치 페이지가 이동된 것처럼 보여줄 수 있음

---

SPA(Single Page Application)란?

• Page가 Single로 단 1개의 페이지만을 사용한다는 것
• MPA(Multi Page Application)은 대체로 1개의 URL 마다 1개의 페이지가 매칭이 됨
  Ex) '/aaa' 주소 = aaa.html, '/bbb' 주소 = bbb.html → 2개의 페이지 
• React는 SPA이기 때문에 최초 index.html 1번만 로드하고 이후 URL이 변경될 때 전체 페이지를 다시 로드하는 것이 아니라 필요한 부분만 변경하는 방식이기 때문에 HTML보다 빠름
  → HTML의 <a> 태그는 페이지를 새로 고침 하면서 이동하기 때문에 페이지 이동마다 서버로부터 모든 리소스(html, css, javascript 등)를 받아 그려야하기 때문에 속도 차이가 발생

---

<a> 태그는 사용해선 안되는가?

• <a> 태그를 사용할 수는 있으나 앞서 언급했듯이 <a> 태그는 페이지를 새로 고침 하면서 이동하기 때문에 SPA의 장점을 잃게 됨
• 따라서, React에서는 <Link>를 사용하여 페이지를 이동하는 것이 일반적
• 단, 완전히 배제하는 것은 아니라 외부 사이트로 이동하기 위해선 <a> 태그를 사용

---

페이지를 새로 고침하지 않았을 때의 이점

• 여러가지 이유들이 존재하겠지만 현재 지식으로는 개발자 도구(F12)에서 다양한 추적이 가능

Network(네트워크) 탭

• API 요청 및 응답을 확인 가능
• 새로고침 없이 데이터를 가져오므로 API 호출 패턴을 쉽게 분석 가능
• GraphQL 또는 REST API 요청을 추적하여 어떤 데이터를 불러오는지 확인 가능

Console(콘솔) 탭

• 에러 로그 및 디버깅 메시지 확인 가능
• 상태(State) 변화에 따른 console.log() 결과 추적 가능
• React Developer Tools를 설치하면 더 자세한 상태 확인 가능

Application(애플리케이션) 탭

• 로컬 스토리지(LocalStorage), 세션 스토리지(SessionStorage), 쿠키(Cookies) 데이터를 추적 가능
• React 앱이 상태 관리 라이브러리(예: Redux, Recoil, Zustand)를 사용하면 저장된 데이터 확인 가능

Elements(요소) 탭

• DOM 변화를 실시간으로 확인 가능
• 기존 HTML 방식과 달리, React는 상태가 변하면 특정 요소만 다시 렌더링하기 때문에 그 부분을 추적 가능

React Developer Tools 확장 프로그램 (크롬/엣지)

• React의 상태 및 컴포넌트 구조를 시각적으로 확인할 수 있음
• Props, State 변화 추적 가능
  → Redux나 Context API 사용 시 데이터 흐름도 확인 가능

---

<Link>를 사용 방법

• 반드시 프로젝트 경로에 'react-router-dom'을 설치해야 하며 글로벌 설치는 권장하지 않는다고 함

npm install react-router-dom

 

• <BrowserRouter>로 전체를 감싸야 Link와 Route가 동작
• <Link to="경로">로 이동 버튼 생성
• <Routes><Route path="경로" element={<컴포넌트 />} /></Routes>를 추가해야 정상 동작

import {BrowserRouter, Routes, Route, Link} from "react-router-dom";
import './App.css';

function Home() {
  return (
    <div>
      <h1>Home (/home)</h1>
      <h2>집이 최고</h2>
    </div>
  )
}

function Move() { 
  return (
    <div>
      <h1>Move (/move)</h1>
      <h2>이동했습니다 ㅠㅠ</h2>
    </div>
  )
}

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <header className="App-header">
          <nav>
            <Link to="/home">집</Link>
            <br/>
            <Link to="/move">이동</Link>
          </nav>

          <Routes>
            <Route path="/home" element={<Home/>}></Route>
            <Route path="move" element={<Move/>}></Route>
          </Routes>
        </header>
      </div>
    </BrowserRouter>
  );
}

export default App;

 

---

구조 이해

1. <Link to="경로">와 <Route path="경로">에서 동일한 경로끼리 연결(바인딩)
2. <Link to="/home">집</Link>를 클릭할 경우 to="/home"과 동일한 링크인 path="/home" <Route>를 찾음
3. <Route path="/home" element={<Home/>}> Route가 실행되고 해당 Route에 지정된 컴포넌트(Home)가 렌더링 됨