[React] Link와 Route 차이 (Routes, Link, useNavigate, nesteRoutes, outlet )

1. Route

사용자가 요청하는 주소에 따라 다른 컴포넌트를 보여주고자 할때 Route라는 컴포넌트를 사용한다.

	<Route path="*" element={<div>없는 페이지에요</div>} />
    
    <Route path="/about" element={<About />} />
    <Route path="/about/member" element={<div>멤버임</div>} />
    <Route path="/about/location" element={<div>위치정보</div>} /> */}
  ...
  
  
  
    function About(){
      return(
        <div>
          <p>회사정보</p>
        </div>
      )
    }
  

2. Link

Link 컴포넌트는 클릭하면 다른 주소로 이동시키는 컴포넌트이다.
일반적으로 리액트 라우터에서 a태그를 사용해서는 안되기때문에 그대신 Link라는 컴포넌트를 사용한다.

	* a 태그의 기본적인 속성은 페이지를 이동시키면서, 페이지를 아예 새로 불러오게된다. 그렇게 되면서 우리 리액트 앱이 지니고있는 상태들도 초기화되고, 렌더링된 컴포넌트도 모두 사라지고 새로 렌더링을 하게됩니다. 그렇기 때문에 Link 컴포넌트를 사용하는데 이 컴포넌트는 HTML5 History API 를 사용하여 브라우저의 주소만 바꿀뿐, 페이지를 새로 불러오지는 않는다.

import Detail from './pages/Detail.js';

<Link to="/">홈</Link>
<Link to="/detail"><div>상세페이지</div></Link>

+ 추가 Link 컴포넌트와 useNavigate hook의 차이

1. Link
   클릭 시 바로 이동하는 로직 구현 시에 사용
   ex) 상품 리스트에서 상세 페이지 이동 시
2. useNavigate
   페이지 전환 시 추가로 처리해야 하는 로직이 있을 경우 useNavigate 사용
   ex) 로그인 버튼 클릭 시
   회원가입 되어 있는 사용자 -> Main 페이지로 이동
   회원가입이 되어 있지 않은 사용자 -> SignUp 페이지로 이동