Router

• 개요
  웹페이지와 웹사이트
  웹페이지는 웹브라우저를 통해 화면에 보여지는 페이지를 의미한다.
  웹사이트는 웹페이지들을 다양한 방법으로 묶은 모음을 말한다.

주소창 경로입력
-> 경로마다 존재하는 html/css/js파일 받아서 렌더링함.

웹페이지마다 두개 이상의 html이 존재하는 경우 Multi Page Application이라고 하고
하나의 html로 이루어진 것은 Single Page App라고 한다.

React는 SPA.

HTML이 하나일지라도 JS파일이 여러개 있으면 MPA처럼 여러 페이지를 브라우저에 띄울 수 있다.

웹브라우저는
https://~~ /Login
https://~~ /Main
처럼 경로마다 해당 페이지를 브라우저 화면에 출력하는 것을 Routing이라고 함.

리액트는 UI를 그리는 라이브러리기 때문에 Routing 기능이 내장되어있지 않아 React-Router 라이브러리를 설치해서 사용해야 함.

• React-Router 설치하기
  진행중인 project를 열고 터미널 열어서
  npm install react-router-dom 입력 Enter
  -> package.json 파일로 가기 ->dependencies 내역
  -> react-router-dom 설치 확인
  -> src폴더에 Router.js 파일 생성
  (이유 : index.js에서는 index.html의 root에 컴포넌트를 연겷해 렌더하고 있음. 그러나 로그인이나 sign up을 띄워야하면 root.render();를 계속 바꿔줘야 함.
  이런 경로 관리를 편리하게 하기 위해서 Router.js로 관리함.)
  -> 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";

const Router = ()=>{
return (
<BrowserRouter> //경로 변경에 여러 편의기능 제공
  <Routes>      
  //여러 route 감싸고 라우트 지정경로와 
  //브라우저 url경로가 딱 맞는 컴포를 브라우저에 그림
    <Route path="/" element={<Login />} />     
	<Route path="/signup" element={<Signup />} /> 
    <Route path="/main" element={<Main />} /> 
//브라우저에 랜더링 할 컴포와 경로 지정하는 역할      
//라우트 속성: path 브라우저에 렌더링할 컴포 경로할당
      //  element 경로에 따라 렌더링될 컴포넌트 할당.
  </Routes> 
</BrowserRouter>  
);
  export default Router;

npm start하고 Route path를 url 뒤에 붙여주면 해당 페이지를 렌더링해줌.

• navigation과 footer 설정

태그 밖에(위(Nav) 아래(Footer)) `

• 라우터에서 클릭으로 주소 변경하는 법 2가지

1. Link Component
   :리액트 라우터 돔이 제공함.
   import {Link} from "react-router-dom";
   해당 페이지 컴포넌트에 위치 시키면 됨.
   return <Link to="/sign">signup으로 이동</Link>

   근데 개발자 도구를 이용해서 해당 Link 태그를 보면 a태그로 바뀌어 있음.

   Link는 프로젝트 내에서 Router.js엣 지정한 경로를 이동할 때 사용
   (insta login -> signup)
   a는 프로젝트 외부 경로로 이동할 때 사용.(insta -> youtube)

   물론 페이지를 여러개 만들어서 a를 사용 가능하지만 SPA를 사용하여 빠른 이점을 살리지 못하는 문제가 생김.

2. useNavigate hook
   import {useNavigate} from "react-router-dom"
   컴포 내에서 const navigate = useNavigate();
   navigate('/main') 이런식으로 쓸 수 있음.

   return <h1>Signup
   <button onClick={()=>{navigate('/main')}}>main으로 이동</button>
   </h1>;

   useNavigate는 특정 조건을 걸고 조건을 만족할 때만 작동하게 할 수 있어서 Link와는 다르게 쓰임. (id pw)

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