React Router

🍭 spa에서 화면을 전환시키는 router, 그리고 스타일링은 편하게 할 수 있는 css전처리기인 sass에 대해 설명 싀이이이이이이작!

SPA

songle page application 페이지가 한 개인 어플리케이션

Routing

다른 경로(url주소)에 따른 다른 view(화면)을 보여주는것 (화면전환)
라우터는 리액트의 라우팅 기능을 위해 가장 많이 사용 되는 라이브러리 이다.

👾 React Router

react-router 설치

터미널에 npm install react-router-dom --save 값을 입력하여 설치

react router 컴포넌트

1. router 컴포넌트 구현하기

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;

Router.js 파일에 넣어준 코드이다.
먼저 로그인창에서 메인페이지로 넘어가게 만들어주는 Routes를 구현해주었다.

2. index.js 연결

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

Router 컴포넌트로 설정해줬다.

3. Route 이동하기

이동하는 방법 두가지가 있다.

• Link : to prop을 갖는다.
• useNavigate : path prop을 갖는다.

3-1. Link

import React from "react";
import { Link } from "react-router-dom";

function Login() {
  return (
    <div>
      <Link to="/signup">회원가입</Link>
    </div>
  );
}

export default Login;

이런식으로 회원가입을 클릭하면 사이트를 불러오는 개념이다.
Link/ 컴포넌트는 a태그와 같이 지정한 경로로 바로 이동시켜주는 기능을 한다.


하지만 두개의 태그의 차이점은 a태그는 외부 사이트로 이동하는 경우 이고, Link는 프로젝트 내에서 페이지 전환하는 경우이다.

3-2. useNavigate

import React from "react";
import { useNavigate } from "react-router-dom";

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

  const goToMain = () => {
    navigate("/main");
  };

  return (
    <div className="login">
      <h1 className="login_logo">Westagram</h1>
      <div className="login_input">
        <input
          type="text"
          className="inputId"
          placeholder="전화번호, 사용자 이름 또는 이메일"
        />
        <input type="password" className="inputPw" placeholder="비밀번호" />
        <button className="login_btn" onClick={goToMain}>
          로그인
        </button>
      </div>
      <div className="forget_pw">
        <a className="forgetPwLink" href="#">
          비밀번호를 잊으셨나요?
        </a>
      </div>
    </div>
  );
};

export default Login;

useNavigate는 함수 호출을 통해 페이지를 이동시키는 방법이다.

goToMain 에서 구현한것처럼 useNavigate 훅을 통해 페이지 이동하는 방법도 있다.

이렇게 구현하면 버튼을 클릭하면 해당 페이지로 이동을 할 수 있게 함수를 반환해주고 해당 함수는 navigate라는 변수에 저장한다 그다음 navigate의 인자로 Router.js에서 설정한 path를 넘겨주면 해당 경로로 이동할 수 있다.