✅ Router

• Route : "경로"
• Routing : "경로를 찾는 행위"
• Router : Routing을 해주는 "도구"
• 다른 경로(url 주소)에 따라 다른 View를 보여주는 것

웹페이지 : 웹브라우저를 통해 보여지는 문서(페이지)
웹사이트 : 웹페이지들의 모음(사이트)

SPA

Single Page Application

: 웹사이트 전체에 html파일이 단 하나인 경우

MDA

Multi Page Application

: 각 페이지마다 html파일을 가지고 있는 경우

💡 React는 SPA인데 어떻게 웹사이트를 만들 수 있을까?

• 하나의 html 파일에 여러개의 js 파일(UI를 구성하는 코드들이 담겨있음)들이 id=root라는 div에 DOM으로 그려지게 되어 MPA처럼 구현이 가능
• 경로마다 해당 페이지를 브라우저 화면에 출력하는 라우팅기능이 담긴 라이브러리(React Router)를 사용할 수 있다

📌 BrowserRouter

: 경로 변경에 대해 여러 편의 기능을 제공하는 컴포넌트
페이지의 "새로고침 없이 주소변경"을 가능하게 함

📌 Routes

: 여러 Route 컴포넌트를 감싸는 역할
Route에 지정된 상대 경로와 브라우저 주소창에 입력한 URL 경로가 맞는 컴포넌트가 있다면 해당 컴포넌트를 브라우저에 "그리는" 역할

📌 Route

: 브라우저에 "렌더링할 컴포넌트와 경로를 지정"하는 역할

💡 Router 컴포넌트를 만드는 이유?

최초화면에서 App 컴포넌트의 내용만 확인 가능하기 때문에, 라우팅 기능을 구현하고 관리하기 위해서 라우터 컴포넌트가 필요하다

💡 라우터 파일의 위치 = src 폴더 안 index.js와 같은 위치

📌 Router 컴포넌트 구현

: 라우팅을 구현하기 위해 설치한 패키지 => react-router-dom
BrowserRouter, Routes, Route 컴포넌트를 import할 것

// Router.js

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

// Router.js

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

const Router = () => {
	return (
    	<BrowserRoutes>
        	<Routes>
            	<Route path="/" element={<Components />} />
            </Routes>
        </BrowserRoutes>
    );
}

export default Router;

• BrowserRouter 컴포넌트로 전체를 감싼다 -> 새로고침 없이 페이지 이동 가능
• BrowserRouter 자식 요소인 Routes 컴포넌트 삽입 -> 지정된 상대경로와 일치하는 컴포넌트만 브라우저에 그려줌(Rendering)
• Routes 자식 요소인 Route 컴포넌트 삽입
  -> 브라우저에 렌더링할 컴포넌트와 경로를 지정하는 역할
  -> path(경로 속성)
  -> element(path에서 설정한 경로로 이동 시 어떤 컴포넌트를 보여줄 지 결정하는 속성 = 화면에 그려지는 UI를 담은 컴포넌트)
  

// Router.js

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Login from './pages/Login/Login';			]
import Signup from './pages/Signup/Signup';			]	// 1
import Main from './pages/Main/Main';				]

const Router = () => {
	return (
    	<BrowserRoutes>
        	<Routes>
            	<Route path="/" element={<Components />} />		]
                <Route path="/signup" element={<Signup />} />	] // 2
                <Route path="/main" element={<Main />} />		]
            </Routes>
        </BrowserRoutes>
    );
};

export default Router;

• // 1 : 화면에 그려줄 UI를 담은 컴포넌트를 import
• // 2 : Route 컴포넌트의 path 속성 설정, 설정경로(url)이동 시 화면에 그려질 UI를 담은 컴포넌트 element 속성에 설정
  -> / : default, http://localhost:3000
  url에서 아무런 경로를 지정해주지 않은 경우, Route 컴포넌트의 path 속성에서 '/'을 찾아 일치파는 elemnent의 컴포넌트를 그려주게 된다
  -> /singup : 해당 이름(signup)의 페이지로 이동, http://localhost:3000/signup
  

📌 Router 활용하기

: 경로와 상관없이 보여주고 싶은 컴포넌트가 있을 시 이 규칙에 포함되지 않도록 Routes 컴포넌트 밖에 위치시켜주면 특정 경로가 아닌 경로에도 항상 화면에 보여지게 할 수 있다

// Router.js

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Nav from './components/Nav/Nav';
import Footer from './components/Footer/Footer'
import Login from './components/Login/Login';
import Signup from './components/Signup/Signup';
import Main from './components/Main/Main';

const Router = () => {
	return (
    	<BrowserRouter>
        	<Nav />			// nav 컴포넌트
            <Routes>
            	<Routes path="/" element={<Login />} />
                <Routes path="/" element={<Login />} />
                <Routes path="/" element={<Login />} />
            </Routes>	
            <Footer />		// footer 컴포넌트
        </BrowserRouter>
    );
};

export default Router;

📌 Index.js 수정하기

개별 컴포넌트가 아닌 Router 컴포넌트로 대체해 줄것
주소창에서 default 주소 끝에 해당 컴포넌트 이름을 입력하면 창을 이동할 수 있다
ex)
http://localhost:3000 -> default
http://localhost:3000/main -> 주소 옆 컴포넌트 입력

// index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import Router from './Router';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Router />);

💡 Link vs useNavigate hook

Link

• 클릭 시 바로 페이지를 이동, 조건 없이 ❌ 페이지를 이동할 때 적합
• Nav Bar의 메뉴 혹은 Aside Menu 등 바로 페이지를 이동하는 경우 사용하는 것이 좋음
• 개발자도구에서 확인해보면, Link태그가 a태그로 변해있는 것을 볼 수 있다
• ✨ Link 컴포넌트 => a태그로 변환
• ✨ a태그 대신 Link컴포넌트를 사용하는 이유?
  => a : 일부만 변경하더라도, 서버로부터 매번 새로운 페이지를 요청함
  => Link : 실제서버에 요청을 보내지 않고, 단지 url만 변경(react-router-dom에서 인지),
  실제 화면에서 변경되어야 하는 부분만 새로 렌더링(효율적)
  
  

useNavigate hook

• 조건에 따라 ⭕️ 페이지를 전환해야 할 때
• link + onclik의 기능이 합쳐진 느낌
• 로그인 버튼 클릭 시에 백엔드 API로 데이터를 전송하는 작업을 한 뒤 페이지를 이동하거나 userData의 인증 혹은 인가가 필요한 경우,
  혹은 로그인 작업 이후 응답 메시지에 따른 분기 처리를 해야 하는 상황일 때, useNavigate를 사용하는 것이 좋음
  
  ✨ 애플리케이션 내부에서 url을 통해 페이지를 전환해야 할 때는Link컴포넌트
  외부 사이트로 이동할 때는, 항상 전체페이지를 새로 받아와야하기 때문에 a태그를 사용해야한다
  
• //1 : react-router-dom에서 useNavigate를 import
• //2 : useNavigate함수 실행, 해당 함수가 반환한 결과를 navigate라는 변수에 할당
  (useNavigate가 반환하는 값 = 페이지를 이동하는 함수 = navigate변수는 페이지를 이동하는 함수)
• //3 : JSX의 특징을 이용해 이벤트를 걸어주고 싶은 태그에 속성을 설정하듯 직접 적용할 수 있다

💡 Router 컴포넌트를 만드는 이유?

최초화면에서 App 컴포넌트의 내용만 확인 가능, 라우팅 기능을 구현하고 관리하기 위해서 라우터 컴포넌트가 필요하다 !