1. Routing:

경로를 찾는행위
React는 Framework가 아닌 Library이기 때문에 라우팅 기능이 내장되어있지 않다.
그래서 별도의 라이브러리를 설치해서 구현한다.
SPA이기 때문에 페이지를 이동하지 않고 하나의 html에서 경로에 따라 다른 UI 를 보여주는 라우팅기능이 필요

2. React-Router

1. react-router-dom 설치
: 라우팅을 위해 가장 많이 사용되는 라이브러리

터미널 코드
$ npm install react-router-dom

• 터미널에서 해당 프로젝트 폴더로 이동한 뒤 설치

▶️ 설치 후, package.json의 dependencies항목에서 패키지명이 추가됬는지 확인하기

2. Router 컴포넌트
: 라우터 구현하기

2-1 컴포넌트의 필요성

• 라우터 컴포넌트 없이 npm start로 웹앱을 실행하면 URL을 변경해도APP 컴포넌트의 내용만 확인할 수 있다.

2-2 Router.js 파일의 위치:
:Router.js 파일은 src 폴더 안 index.js와 같은 위치에 생성하고, App.js와 App.css 파일은 제거

2-3 Router 컴포넌트 구현

// Router.js
//패키지에 포함되어있는 여러 컴포넌트중, `BrowserRouter`, `Routes`, `Route`를 import 
import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
const Router = () => {
  return (
    <BrowserRouter>       // 1. 전체 감싸주기                               
      <Routes>            // 2. 자식요소로 넣어주기                            
        <Route path="/" element={<Components />} />  // 3 Route의 자식요소로 넣어주기
      </Routes>
    </BrowserRouter>
  );
};
export default Router;

✔️ 각 컴포넌트의 역할


BrowserRouter
: 주소변경에 대한 편의 기능 제공
대표적인기능 - 페이지가 새로고침 되지 않아도 주소변경 가능
Routes
: 여러 Route를 감싸서 그중 규칙이 일치하는 라우트 단 하나만을 렌더링 시켜주는 역할
Route
: 규칙을 설정.
HTML처럼 속성을 가지고 있음 (path 와 element)

• path: 경로설정 (화면에 그려질 UI를 담은 컴포넌트를 import )
  - path 의 경로를 /로 설정해주면 Route 컴포넌트의 path속성에서 일지하는 element의 속성을 그려준다.
• element: path 속성에서 설정한 경로로 이동했을 때, 어떤 컴포넌트를 보여줄지 결정

// 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 (
    <BrowserRouter>
      <Routes>
        <Route path='/' element={<Login />} />              
        <Route path='/signup' element={<Signup />} >        // 2
        <Route path='/main' element={<Main />} />           
      </Routes>
    </BrowserRouter>
 );
};
export default Router;

---

▶️ 경로에 상관없이 보여주고 싶은 컴포넌트가 있다면 `Routes` 컴포넌트 밖에 위치

3. index.js 수정
: index.js에서 App 컴포넌트가 있는 위치에 Router 컴포넌트를 대체.
npm start로 화면을 띄우고 설정해준 url 마다 UI 변경확인

4. Route 이동하기

• link 컴포넌트 사용
  - 애플리케이션 내부에서 url을 통해 페이지를 전환해야 할때 사용
  - 개발자도구에서 확인해보면 a태그라고 뜬다.

  import React from 'react';
  import { Link } from 'react-router-dom';
  const Login = () => {
  return <Link to="/signup">회원가입</Link>;
  };
  export default Login;
  

• a 태그사용
  - 외부 사이트로 이동할 때 사용

5. useNavigate hook 사용하기

• 로그인과 같이 특정조건이 충족되었을때 페이지를 전환해야 할 때 사용.
  
  
  예시코드

  import React from 'react';
  import { useNavigate } from 'react-router-dom';    
  const Login = () => {
  const navigate = useNavigate();            
  const goToMain = () => {
  if (response.message === "valid user") {
    navigate("/main");
  } else {
    alert("가입된 회원이 아닙니다. 회원가입을 먼저 해주세요.");
    navigate("/signup");
  }
  };
  return (
    <button className="loginBtn" onClick={goToMain}>  // 4
      로그인
    </button>
  );
  };
  export default Login;