React v6 변화한 router 사용하기 (Link, Routes, Route 태그)

안녕하세요 인포돈 입니다.

최근에 변화된 React v6에 의거하여 작성되었습니다.
실행코드 ide는 vscode를 활용합니다!
리액트 이전에 html, css, js에 대한 기본 지식이 있어야 합니다.

---

React Router란

 웹 프런트엔드를 개발하다 보면 항상 document를 활용해 페이지를 넘겨주는 작업이 귀찮고, 사이트가 방대해질수록 점점 복잡한 구조 때문에 어려움을 겪기 일상입니다. 우리는 이러한 문제점을 보다 쉽게 해결하기 위해서 React에서 제공하는 Router를 사용하면 이러한 어려움을 해결할 수 있게 됩니다.

 

 리액트에는 이러한 페이지 이동을 보다 쉽게 해주는 많은 라이브러리가 있지만, 대중적으로 가장 많이 사용하는 라이브러리가 바로 React Router입니다. 이러한 router는 클라이언트에서 일을 처리함으로 서버의 자원을 절약할 수 있는 장점이 있자만, 브라우저에서 js가 동작하지 않으면 인터페이스를 볼 수 없다는 단점이 있죠..ㅜ

 

 - dom이란

dom은 문서 객체 모델(The Document Object Model)이다. 웹 페이지는 일종의 문서의 다발이라고 생각해야 합니다. 예를 들어 티스토리를 생각해보죠

제 블로그의 메인 페이지입니다. 여기서 우리는 최신 글을 클릭하여 글을 볼 수도 있고 오른쪽 NAVBAR에서 각 카테고리를 클릭하여 카테고리 목록을 볼 수도 있습니다.  이때 우리는 이 하나하나의 페이지를 바로 문서라고 보는 것이죠. DOM은 이러한 문서들을 표현하고, 저장하고, 조작하는 방법 제공하는 일종의 상자입니다. DOM에다가 우리는 티스토리의 메인 페이지에 대한 HTML을 저장하고 우리가 홈버튼을 누르면 우리는 해당 DOM에 다가가 정보를 요구하면 되는 것이죠. 이러한 기능을 가지는 일종의 박스를 우리는 DOM이라고 부릅니다.

---

React Router 사용하기

기본적으로 React에서 Router를 사용하기 위해서는 router 패키지를 먼저 설치해줍니다. 리액트 프로젝트 파일을 생성해주고 해당 프로젝트 파일 안에서 terminal을 통해서 아래 코드를 입력해줍니다.

(아 물론 node.js와 기본적인 리액트 app이 다운되어있어야 합니다.)

npm install react-router-dom --save

기본 리액트 app은 프로젝트 폴더 안에서 terminalㅇ르 통해서 아래 코드를 입력

npx creat-react-app name

하시면 됩니다.

 

그러면 이제 기본적인 react 웹 페이지가 만들어졌는데 우리는 router를 활용해봐야 합니다. 그러면 간단히 웹 페이지를 만들어줍니다.

 

index.js

 - Product1

function Product1(){
  return(
    <div>
      <h2> 상품 1번 선택</h2>
    </div>
  )
}

 - Product2

function Product2(){
  return(
      <div>
      <h2> 상품 2번 선택</h2>
    </div>
  )
}

 - Home

function Home(){
  return(
    <div>
      <h2> 홈화면</h2>
    </div>
  )
}

 - App

function App(){

  return(
    <div>
      <h2>메인 페이지</h2>
        <ul>
          <li><Link to="/">홈가기</Link></li>
          <li><Link to="/product1">1번상품</Link></li>
          <li><Link to="/product2">2번상품</Link></li>
        </ul>

        <Routes>
          <Route exact paht="/" element={< Home/>}></Route>
          <Route paht="/product1" element={< Product1/>}></Route>
          <Route paht="/product2" element={< Product2/>}></Route>
          <Route path="/" element={'Not found'}></Route>
        </Routes>
    </div>

  )
}

이런 식으로 Route를 설정하시면 됩니다. 이게 v6으로 업데이트되면서 Route를 사용하는 방법이 바뀌었습니다. 기존에 <Switch>가 <Routes>로 변경된 것입니다. 

---

Link 태그

        <ul>
          <li><Link to="/">홈가기</Link></li>
          <li><Link to="/product1">1번상품</Link></li>
          <li><Link to="/product2">2번상품</Link></li>
        </ul>

링크 태그는 간단합니다. 우리가 기존에 알고 있었던 <a> 태그와 굉장히 유사합니다. 여기서 우리는 href 대신에 a를 통해서 해당 위치로 url을 이동하게 됩니다.

---

Route 태그

        <Routes>
          <Route exact paht="/" element={< Home/>}></Route>
          <Route paht="/product1" element={< Product1/>}></Route>
          <Route paht="/product2" element={< Product2/>}></Route>
          <Route path="/" element={'Not found'}></Route>
        </Routes>

Route태그는 반듯이 Routes로 묶어줘야 합니다. 이후 우리가 link로 이동한 홈페이지로 갈 때 우리는 사용자에게 보여줄 문서를 넘겨줍니다. 그러면 해당 url이 이동함에 따라 사용자에게 보이는 페이지가 달라지게 보이게 되죠

---

결과 화면