[react-router-dom@5] route,switch,useParams

// react-router-dom은 Client-Side-Rendering을 제공하는 reac-app의 라우팅 기능이다.

// routing의 사용 목적은 궁극적으로 페이지에서 다른 경로를 처리하고,
// 해당 컴포넌트를 로드하는 것이다.
// 예를들어 www.some.com/about에 대한 요청이 About Component를 로드하게 하고,
// www.some.com/products는 Products Components를 로드하게 설정하는 것이다.

// 도메인 뒤에 위치하는 텍스트로 조건부로 컴포넌트를 랜더링하는 것인데,
// 조건부 랜더링이란 isShow와 같은 state로 컴포넌트를 보이게 하거나 숨기는 경우,
// isLoading과 같은 state로 특정 컴포넌트를 보여주거나 숨기는 경우와 같은 것이다.

// 그 state의 역할을 URL의 경로가 하게끔 만들어 작업을 수행하게 만드는 것이 router를 사용하는 이유다.

import ReactDOM from 'react-dom';

import './index.css';
import App from './App';
import { BrowserRouter, Switch } from 'react-router-dom';

ReactDOM.render(
  //BrowerRouter로 App 컴포넌트를 감싸 Router 기능을 활성화 시킨다.
  <BrowserRouter>
    <Switch>
      <App />
    </Switch>
  </BrowserRouter>,
  document.getElementById('root')
);

import {Route,Switch,Redirect} from 'react-router-dom';
import MainHeader from './components/MainHeader';
import ProductDetail from './pages/ProductDetail';
import Products from './pages/Products';
import Welcome from './pages/Welcome';

function App() {
  return (
    <>
      <MainHeader />
      <main>
        {/* Switch 컴포넌트는 해당 경로 중 하나만 활성화 되게 만들어준다.
            활성화의 기준은 가장 먼저 매칭되는 라우트가 된다.
            5버전에서는 특정 라우트가 더 구체적인지의 여부가 크게 중요하지 않다.
            그저 위에서 아래로 통과할 뿐이다.
            또한 일치하는 항목을 찾는다는 것은 경로의 시작 부분과 일치할 때를 의미한다.*/}
        <Switch>
          {/* Redirect는 Route의 path로 사용자가 접속한다면
          Redirect의 to props에 지정한 곳으로 이동시키는 Hook이다.
          이때 exact를 사용하지 않으면 무한루프가 되니 주의해야 한다.*/}
          <Route path='/' exact>
          <Redirect to='welcome'/>
          </Route>
      
      {/* path에 적힌 url에 들어오면 Route 컴포넌트 내부에 있는
		 컴포넌트가 화면에 랜더된다. */}
      <Route path="/welcome">
      <Welcome />
      </Route>
          
      {/* exact prop은 path가 정확히 일치하는 경우에만
		해당 컴포넌트를 로드하게 만들어준다.*/}
      <Route path="/products" exact>
        <Products />
      </Route>
          
      {/*해당 Route는 각 상품에 맞는 정보를 보여주어야 하는 Route가 되어야 한다.
      	이를 위해 동적 세그먼트를 정의하는데 사용하는 특별한 식별자인
        콜론(:)으로 정의할 수 있다.
        정의한 이후 Route 내부의 컴포넌트가 동적 세그먼트를 사용할 수 있게끔
		동적 세그먼트에 엑세스 하는 로직을 컴포넌트 내부(ProductDetail)에 만들어준다. 
        콜론 다음에 오는 문자열은 params 객체의 키가 된다. */}
      <Route path="/products/:productId">
      <ProductDetail />
      </Route>
      </Switch>
      </main>
    </>
  );
}

export default App;

import React from 'react';
import {useParams} from 'react-router-dom'
const ProductDetail = () => {
  // 동적 경로를 사용하기 위해서 먼저
  // 컴포넌트 내부(ProductDetail)에서 URL에 입력된 값에 접근해야 한다.
  // useParams Hook은 변수에 저장할 수 있는 params 객체를 반환한다.
  // params 객체는 키와 값을 갖게 되는데, 페이지로 연결되는 동적 세그먼트인 키를 의미한다.
  // 필요한 경우 여러 세그먼트를 가질 수 있다.
  const params = useParams()

  return (
    <section>
      <h1>Product Detail</h1>
      {/* params객체의 key를 입력한다.*/}
      {/* 해당 값은 placeholder인 /products-detail/ 다음에 오는
  	      동적 세그먼트의 값이 오게 된다. */}
      {/* ex) /products-detail/something을 URL에 입력하면,
	   	  something이 해당 paragraph에 위치하게 된다. */}
      <p>{params.productId}</p>
    </section>
  );
};

export default ProductDetail;