리액트로 환경 구축해보기..

리액트 라우터 다운받고
라우터 돔도 다운받고..

개발 환경을 먼저 구축하자

React from 'react'
import { BrowserRouter, Route, Switch, Link } from "react-router-dom"

라우트를 준비하자

function Home() {
return <h1>MyPage<h1>;
} 

like this.. 어떤것을 표시하는 컴포넌트를 만들어준다.

메뉴 만들기

페이지를 표시하는 컴포넌트를 만들었으면, 각 컴포넌트로 이동할 메뉴를 제작해야겠죠?
(위에서 만든 컴포넌트는 아직 화면에 출력되지 않기 때문에 출력을 해줘야함)

function App () {
 return (
  <BrowserRouter>
      <div>
	 <nav>
          <ul>
            <li>
              Home
            </li>
           </ul>
         </nav>
      </div>
   </BrowserRouter>
   )
}

nav 는 구역을 정해주는것임.
BrowserRouter는 가장 바깥쪽에
여기 안에 라우트와 스위치, 링크가 들어가면됨.

주소에 따라 페이지 뷰 다르게 만들기.

위에서 만든 컴포넌트를 "주소"에 따라 다르게 보이게 만든다.
(보통의 url뒤에 들어가는 google.com/asdasd 이라 생각하면됨.
Home 페이지의 주소 "/"
MyPage 페이지의 주소 "/mypage"
Dashboard 페이지의 주소 "/dashboard"

Switch, Route

경로를 매칭해주는 역할을 하는 컴포넌트

• 컴포넌트는 여러 를 감싸서 그 중 경로가 일치하는 단 하나의 라우터만 렌더링을 시켜주는
  역할을 한다. 를 사용하지 않으면 매칭되는 모든 요소를 렌더링.
• 컴포넌트는 path 속성을 지정하여 해당 path 에 어떤 컴포넌트를 보여줄지 정한다.
  Link 컴포넌트가 정해주는 URL 경로와 일치하는 경우에만 작동된다.

Link

경로를 연결해주는 역할을 하는 컴포넌트.
페이지 전환을 통해 페이지를 새로 불러오지 않고 애플리케이션을 그대로 유지하여,
HTML5 History API를 이용해 페이지의 주소만 변경해 준다.

 function App () {
  return (
   <BrowserRouter>
      <div>
        <nav>
          <ul>
            <li>
              Home
            </li>
            <li>
              MyPage
            </li>
            <li>
              Dashboard
            </li>
          </ul>
        </nav>

    {/* 주소경로와 우리가 아까 만든 3개의 컴포넌트를 연결해줍니다. */}
      <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about"> {/* 경로를 설정하고 */}
            <MyPage /> {/* 컴포넌트를 연결합니다. */}
          </Route>
          <Route path="/dashboard">
            <Dashboard />
          </Route>
        </Switch>
      </div>
   </BrowserRouter>
  )
}

처음 라우트에는 정확한 경로를 정해주기 위하여 exact를 붙여준다.

의 to 속성을 활용하여 Route 컴포넌트를 설정해준 path 주소를 연결해준다.

  function App() {
  return (
    <BrowserRouter>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>{/* Link 컴포넌트를 이용하여 경로를 연결합니다 */}
            </li>
            <li>
              <Link to="/about">MyPage</Link>
            </li>
            <li>
              <Link to="/dashboard">Dashboard</Link>
            </li>
          </ul>
        </nav>
        
        생략...