SPA로 구성된 React에서 Router 구현하기

리액트는 SPA로 html파일이 하나밖에 없는 라이브러리다.

MPA처럼 다른 파일로 넘어가는것처럼 보여주기 위해 여러컴포넌트를 라우터를 이용해 옮겨다닌다.

우리는 한페이지짜리 웹을 만드는 것이 아니니까 라우터 기능을 필히 알아야한다.

 

이번에는 기존에 작업하던것에 라우터를 적용해보려고 한다.

---

[과제 1] Router 컴포넌트 구현하고 Router 기능 구현하기

---

일단 먼저 link와 useNavigate를 쓸거기때문에 import를 먼저 해준다.

당연히 export도 미리 해준다.

import React from "react";
import { Link } from "react-router-dom";
import { useNavigate } from "react-router-dom";
import "./Introduce.scss";

export default Introduce;

link와 useNavigate 둘 다 라우팅을 할 수 있지만

link의 경우 무조건 연결된 페이지로 넘어가게 설정이 되어있어서

보통 카테고리에서 메뉴를 넘어갈 때 쓰인다.

useNavigate는 조건이 충족되었을 때 페이지를 넘어갈 수 있기 때문에

백엔드에게 정보를 전해주고 그 정보가 일치할 때 다음 페이지로 넘어갈 수 있는 로그인 기능에서 많이 쓰인다.

 

일단 useNavigate로 먼저 구현해볼 것이다.

return문을 먼저 써주면서 navigate hook을 써줄 함수도 미리 button onclick으로 만들어준다.

  return (
    <div className="introduce">
      <img className="photo" alt="hambbang" src="images/IMG_7632.JPG" />
      <div className="letters">
        <p className="name">이름</p>
        <p className="number">기수</p>
      </div>
      <div className="inputButton">
        <input id="input"></input>
        <button id="button" onClick={HandleButton}>
          클릭
        </button>
        <br />
      </div>
    </div>
  );

navigate hook을 쓸 땐 먼저 useNavigate함수를 navigate 변수로 선언해준다.

그리고 navigate 변수에 가고 싶은 링크를 연결해준다.

 const navigate = useNavigate();
  
  function HandleButton() {
    navigate("/Product");
  }

useNavigate로 완성된 화면은 이렇다.

 

link로 라우팅을 구현할 땐 to 속성으로 가고싶은 페이지를 연결해주면 된다.

        <Link to="./Product">move to Product page</Link>

버튼에 바로 적용한다면 이렇게 할 수도 있다.

<button id="button">
 <Link to="/Main">로그인</Link>
</button>

link로 구현한 화면은 이렇다.

지금은 그저 페이지를 이동하는 기능만 넣어서 두 컴포넌트의 차이점이 없다.

아래는 전체 코드이다.

import React from "react";
import { Link } from "react-router-dom";
import { useNavigate } from "react-router-dom";
import "./Introduce.scss";

function Introduce() {
  const navigate = useNavigate();
  
  function HandleButton() {
    navigate("/Product");
  }
  return (
    <div className="introduce">
      <img className="photo" alt="hambbang" src="images/IMG_7632.JPG" />
      <div className="letters">
        <p className="name">이름</p>
        <p className="number">기수</p>
      </div>
      <div className="inputButton">
        <input id="input"></input>
        <button id="button" onClick={HandleButton}>
          클릭
        </button>
        <br />
        <Link to="./Product">move to Product page</Link>
      </div>
    </div>
  );
}

export default Introduce;