[React] React Router(리액트에서 링크 구현하기)

SPA(Single Page Application)

싱글페이지앱. 한개의 html페이지만 존재. 한개의 html에서 여러개의 페이지를 보여주기 위해 사용하는 방법 중 하나가 Routing.

Routing

url에 따라 다른 View를 보여주는 리액트 Library. 리액트에 내장된 링크기능 없음. 이러한 이유로 리액트는 Framework이 아닌 Library로 분류됨.

React Router

1. 설치(--save는 package.json추가 위한 옵션)
   npm install react-router-dom --save

2. Router 컴포넌트 구현(src/Router.js)

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";

import Login from "./pages/Login/Login";
import Main from "./pages/Main/Main";

function Router() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Login />} />
        <Route path="/main" element={<Main />} />
      </Routes>
    </BrowserRouter>
  );
}

export default Router;

3. 메인페이지 진입점을 Router 컴포넌트로(index.js)

ReactDOM.render(<Router />, document.getElementById('root'));

4. -1. <Link>컴포넌트 사용
   import { Link } from "react-router-dom";
<Link to="/main">로그인</Link>

import React from 'react';
import { Link } from "react-router-dom";
import './Login.css';

const Login = () => {
  return (
    <>
      <div id="wrapper">
        <h1>westagram</h1>
        <div className="login">
          <input type="text" placeholder="전화번호, 사용자 이름 또는 이메일" className="username"/>
          <input type="password" placeholder="비밀번호" className="userpassword" />
          <Link to="/main">로그인</Link>
        </div>
        <p>비밀번호를 잊으셨나요?</p>
      </div>
    </>
  );
};

export default Login;

4. -2. useNavigate사용

import React from 'react';
// import { Link } from "react-router-dom";
import { useNavigate } from 'react-router-dom';
import './Login.css';

const Login = () => {
  const navigate = useNavigate();

  const goToMain = () => {
    navigate("/main");
  };
  
  // 실제 활용 예시
  // const goToMain = () => {
  //   if(response.message === "valid user"){
  //     navigate('/main');
  //   } else {
  //     alert("가입된 회원이 아닙니다. 회원가입을 먼저 해주세요.")
  //     navigate('/signup');
  //   }
  // }

  return (
    <>
      <div id="wrapper">
        <h1>westagram</h1>
        <div className="login">
          <input type="text" placeholder="전화번호, 사용자 이름 또는 이메일" className="username"/>
          <input type="password" placeholder="비밀번호" className="userpassword" />
          {/* <Link to="/main">로그인</Link> */}
          <span onClick={goToMain}>로그인</span>
        </div>
        <p>비밀번호를 잊으셨나요?</p>
      </div>
    </>
  );
};

export default Login;

Link와 useNavigate의 용도

1. <Link />
   클릭시 바로 이동하는 로직(ex. 아이템리스트 => 아이템상세페이지)
   페이지 새로고침을 방지하기위해 a태그 대신 사용함(a는 외부사이트로 갈 경우)
   태그수정 대신 Link태그로 감싸주는 형태로 사용하기
2. useNavigate
   페이지 전환에 추가로직 필요한 경우(ex. 로그인 성공/실패)

export

1. named export(한 페이지에서 여러개 내보내기) : import할 때 중괄호를 사용해야 함
2. default export(한 페이지에서 하나만 내보내기)