Hello ReactWorld - 3 / Routing

본 포스팅은 코딩애플님의 리팩트 강의를 수강한 후 참고하여 작성하였습니다.

데이터를 Import, Export 해보자!

가장먼저 프로젝트를 생성한 후 data.js를 생성한다.

한개의 변수만을 Export / Import 하기
1. data.js에 변수를 선언한 후 export한다.

let a = 10;

export default a

2. App.js에서 해당 변수를 import 하여 사용한다.

import data from './data.js';
// import 작명 from './data.js';

function App() {
  return (
    <div className="App">
    {data} // 10 출력
  )
}

두개의 변수를 담아서 Export / Import 하기
1. data.js에 변수를 선언한 후 export 한다.

let a = 10;
let b = 100;

export {a,b}

2. App.js에서 해당 변수를 import 하여 사용한다.

import {a,b} from './data.js';

function App() {
  return (
    <div className="App">
    {a} {b} // 10 100 출력
  )
}

---

Route

url의 path에 따라서 다른 페이지를 보여줄 때
SPA방식의 리액트는 html을 새로 그려주는것이 아니라,
url 변경시 기존 html요소를 비우고 해당 컴포넌트를 보여주는 식으로 작성

url에 따라서 어떤 컴포넌트를 보여줄지 일일히 작성할 수도 있느나,
리액트에서는 이를 편리하게 도와주는 router-dom 이라는 라이브러리가 존재

1. 리우터 설치

npm install react-router-dom@6

2. index.js에 컴포넌트 등록

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
    <App />
    </BrowserRouter>
  </React.StrictMode>
);

3. App.js에 사용할 컴포넌트를 import

import {Route, Routes, Link} from 'react-router-dom'

사용법

<Routes>
  <Route path='/' element={<MainPage dogs={dogs} />} />
  <Route path='/detail' element={<DetailPage/>} />
</Routes>

간단하다. <Routes> 태그로 Route 들이 들어갈 영역을 지정하고
요청할 path= '요청할 url path' element = '보여줄 컴포넌트' 라는 식으로 작성한다.

---

Route - useNavigate : 페이지 이동을 도와주는 함수

hook : 유용한 기능이 들어있는 함수

기존에 페이지를 옮기려면

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

위처럼 Link 태그로 작성시 a태그로 작성되어 밑줄이 남고
디자인적으로도 예쁘지 않다.

<Navbar bg="light" variant='light'>
  <Container>
    <Navbar.Brand href="#Home">LOVEDOG</Navbar.Brand>
    <Nav className="me-auto">
      <Nav.Link onClick={() => {navigate('/')}}>Home</Nav.Link>
      <Nav.Link onClick={() => {navigate('/detail')}}>Detail</Nav.Link>
    </Nav>
  </Container>
</Navbar>

onClick={() => {navigate('원하는 path')}} 를 넣어주면 Link 태그와 동일한 역할을 수행

navigate(1)로 작성시 앞으로가기 기능 수행
navigate(-1)로 작성시 뒤로가기 기능 수행

---

404페이지 만들기

<Route path='/*' element={<div>없는페이지에옹<div/>} />
Routh 경로를 /*로 지정해주면 매핑되지 않은 모든 요청에 대해서 요청을 수행

---

Nested Routes

<Routes>
  <Route path='/about' element={<About/>} />
  <Route path='/about/member' element={<AboutMember/>} />
  <Route path='/about/company' element={<AboutCompany/>} />
  <Route path='/about/friend' element={<AboutFriend/>} />
</Routes>

<Routes>
  <Route path='/about' element={<About/>}>
    <Route path='member' element={<AboutMember/>} />
    <Route path='company' element={<AboutCompany/>} />
    <Route path='friend' element={<AboutFriend/>} />
  </Route>
</Routes>

위 두 코드는 거의 동일한 기능을 수행하며
아래의 문법을 Nested Routes 라고 표현한다.
Nested Routes 문법은 '/about/member' 요청시
About 컴포넌트를 보여주고
About 컴포넌트의 <Outlet/>이라고 표기된 영역에
AboutMember 컴포넌트를 보여준다.

---

URL Parameter

Details/{id}
이런식으로 id를 전달하여 상세페이지를 접속하고 싶을때
일일히 Router를 만드는것은 복잡한 일이다.
이를 간편하게 해주는 문법이다.

Apps.js

<Route path='/detail/:id' element={<DetailPage dogs={dogs }/>} />

DetailPage.js

import { useParams } from "react-router-dom";

const DetailPage = (props) => {

  let {id} = useParams();

  return (
    <div className="container">
    <div className="row">
      <div className="col-md-6">
      <img src={process.env.PUBLIC_URL + '/img/dog'+id+'.jpg'} width={"50%"} />
      </div>
      <div className="col-md-6">
        <h4 className="pt-5">{props.dogs[id].title}</h4>
        <p>{props.dogs[id].content}</p>
        <p>{props.dogs[id].price}원</p>
        <button className="btn btn-danger">주문하기</button>
      </div>
    </div>
  </div>
  )
}

export default DetailPage;

매핑한 url Path를
let {parh이름} = userParams();
으로 선언하면 아래 컴포넌트에서 사용이 가능하다.