📗 Link

웹 어플리케이션에서 사용자가 URL을 통해 페이지에 접근할 때 
해당 URL에 따라 서로 다른 컴포넌트를 보여주는 것을 의미한다.

React에서는 메뉴를 클릭했을 때 다른 화면으로 이동하는 수단으로 많이 사용한다

1. react-router-dom설치

npm install react-router-dom
React에서는 라우터를 구현할 때 react-router-dom을 사용.

2. index.js에 ReactDom 생성 및 BrowserRouter 생성

import React from 'react';
import ReactDOM from 'react-dom/client';
import './css/index.css';
import App from './App';
import {BrowserRouter}from 'react-router-dom';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>
);

App.js를 감싸고 있는 index.js에 ReactDom 생성 및 BrowserRouter 컴포넌트를 생성해보자.
BrowserRouter컴포넌트는 한 번만 생성하면 되기때문에 가독성을 위해 index.js에서 컴포넌트를 감싸서 생성해주었다.

3. App.js에 react-router-dom import하기

import React from 'react';
import { Route, Routes, Link } from 'react-router-dom';
	//react-router-dom 중 Route와 Routes, Link를 사용하기위해 선언


function App() {
  return(
      <div className="App">
          
      </div>
  );
 };
 
 export default App;

4. Link, Route, Routes

Link에서 to에 들어가는 경로와 Route에서 path에 들어가는 경로가 서로가 짝이다.

<Link to="[ 클릭했을 때 이동되는 url ]">
<Route path="[ 클릭했을 때 이동되는 url  ]" element={실제 사용될 화면} >

  
  	import React from 'react';
	import { Route, Routes, Link } from 'react-router-dom';
	import Detail from './page/Detail.js';
	import Home from './page/Home.js';

function App() {
  return(
      <div className="App">
          <ul className="menu">
            <li><Link to='/Home'>home</Link></li>
            <li><Link to='/Detail'>detail</Link></li>
          </ul>

          <Routes>
            <Route path='/Home' element={<Detail />} />
            <Route path='/Detail' element={<Home />} />
          </Routes>
      </div>
  );
};

export default App;

ul, li의 태그에 Link 컴포넌트를 사용하여 'home' 페이지화면과 'detail' 페이지 화면을 불러왔다.

/ Home로 접속하면 Home.js 화면을, /Deatil 은 Detail.js 화면을 보여준다.

 * 리액트에서는 Link태그를 사용하지만 랜더링 되었을때는 Link가 a태그가 되어 랜더링 된다.

💡 Link 컴포넌트와 a태그의 차이점은?

<a href=#>는 전체페이지를 재렌더링 하며 브라우저 주소를 이동하고 페이지자체를 새로고침을 한다.
따라서 상태 값이 유지되지 못하고 속도가 저하된다.

<Link />는 SPA의 특징에 맞게 필요한 부분만 재렌더링하고 나머지 부분은 그대로 유지된다. 
데이터를 필요한 부분만 불러올 수 있기 때문에 속도향상에 도움이된다.

---

📗 useNavigate

1. react-router-dom 설치

npm install react-router-dom
// 이 가정은 Link 컴포넌트와 같음

2. 활용 및 예시

const navigate = useNavigate();

useNavigate 훅을 실행하면 페이지 이동을 도와주는 함수가 반환되는데 이 반환된 함수를 변수에 담는다.

<button onClick={() => { navigate('/about'); }}>
  어바웃 페이지로 이동하기
</button>

<button onClick={() => { navigate(-1); }} >
이전 페이지로 이동하기
</button>

위와 같이 navigate 변수는 첫번째 인자로 이동시킬 페이지의 주소 를 넣거나 ,
-1 과 같은 값을 넣어 페이지 히스토리의 뒤로가기 버튼과 같은 동작을 시킬 수 있다.

  import { useNavigate } from "react-router-dom";
  const Login = () => {
	const navigate = useNavigate();
	return(
      <div className="login">	
		<input placeholder="전화번호, 사용자 이름 또는 이메일"/>
        <input placeholder="비밀번호/>
        <button onClick={() => {navigate("/main");}}>로그인</button>                   
      </div>
	)
  }

💡 Link 컴포넌트와 useNavigate hook의 차이

1. Link
   클릭 시 바로 이동하는 로직 구현 시에 사용
   ex) 상품 리스트에서 상세 페이지 이동 시

2. useNavigate
   페이지 전환 시 추가로 처리해야 하는 로직이 있을 경우 useNavigate 사용
   ex) 로그인 버튼 클릭 시
   회원가입 되어 있는 사용자 -> Main 페이지로 이동
   회원가입이 되어 있지 않은 사용자 -> SignUp 페이지로 이동