React - 라우터

<리액트에서 페이지 나누는 법>

1. 각각의 페이지를 컴포넌트로 만들고 그 페이지 내용을 채운다.
2. 누군가가 그 파일(페이지)에 접속하면 기존 html을 비우고 그 페이지에 해당하는 컴포넌트를 보여준다.

⇒ 우리가 직접 일일히 코드 짤 순 있지만 복잡하기 때문에 우리는 ‘react-router-dom’이라는 라이브러리의 도움을 받을것이다.

<라이브러리 다운 받는 법>

(터미널)
npm install react-router-dom @6 //입력하고 다운 받은 후 
npm start// 미리보기를 띄워준 후에 
(index.js파일로 이동 후)
<BrowserRouter>
<App/>
</BrowserRouter> 
// App 태그를 browserRouter로 감싸주고 import해주면 끝이다. 

<라우터 사용방법>

외울 필요는 없고 어차피 외부 라이브러리를 사용할땐 검색하면 알려주니 참고만 하자.

(app.js 파일)
import {Routes, Route, Link} from 'react-router-dom'
<Routes>
	<Route path='/'/>
	<Route path='/상세페이지명' element={html로 상세페이지를 짜면됨}/>
</Routes>

- Route 하나당 상세페이지 한 개를 의미한다.
- path=”/”는 메인페이지를 의미한다.

path=’/abc’라고 적었으면 주소창에 /abc라고 입력하면 그 페이지로 넘어가게 된다.

하지만 유저들은 주소창에 입력해서 페이지를 이동하는게 아니라 버튼을 눌러 이동하는 방식이 익숙하고 그렇게 한다.

따라서 Link를 사용해서 버튼을 만들어줘야 한다.

<Link to='/'>홈</Link> // 클릭하면 홈으로 이동
<Link to='/상세페이지명'>상세페이지</Link>// 클릭하면 상세페이지로 이동

숙제) Q. 상세페이지를 컴포넌트로 만드는데 다른 페이지에 보관하고 import하는 방식으로 구성해오기.

//Page.js 파일을 만들고 그 파일 안에 보관함.
function Page(){
	return (
		<div className="container">
      <div className="row">
        <div className="col-md-6">
          <img
            src="https://codingapple1.github.io/shop/shoes1.jpg"
            width="100%"
          />
        </div>
        <div className="col-md-6">
          <h4 className="pt-5">상품명</h4>
          <p>상품설명</p>
          <p>120000원</p>
          <button className="btn btn-danger">주문하기</button>
        </div>
      </div>
    </div>
	);
}
export default Page; // 잊지말고 export!!

// 다시 app.js 파일로 돌아와서
import Page from "./Page.js"; // 잊지말고 import 해주고!!
<Route path="전체메뉴" element={<Page />} /> // 원하는 곳에 component형식으로 작성!!

출처. 코딩애플