[React] 9. react-router로 페이지 구현

페이지를 구현해보자

페이지를 나누고 싶으면
일반적으로는 그냥 html 파일 여러개 만들면 그것들이 페이지가 된다

하지만

리액트는 싱글 페이지 어플리케이션이기 때문에 index.html 하나만 사용한다

📢 리액트에서 페이지 구현하는 법

1. 컨포넌트 만들어서 상세페이지 내용 작성
2. url로 접속 시 해당 컴포넌트 렌더링

• 누가 다른 페이지 요청하면 그냥 내부에 있는
  를 갈아치워서 보여주는 방식

➡ react-router-dom 사용하기

---

🖤 설치

npm install react-router-dom@6

🖤 사용법

◾ 1. 우선 index.js에서

App 컴포넌트를 BrowserRouter로 감싼다

root.render(
  <React.StrictMode>
    <BrowserRouter>
    <App />
    </BrowserRouter>
  </React.StrictMode>
);

◾ 2.그리고 App.js에서 필요한 것들 import 해오기

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

◾ 3. App 컴포넌트에서 Routes, Route 사용하기

나는 상단 Nav 바는 어느 페이지든 공통적으로 띄우고 싶기 때문에 Nav 밑에 Routes를 작성하였다

function App() {
  return (
    <div className="App">
    <Navbar bg="light" variant="light">
        <Container>
        <Navbar.Brand href="#home">Shoe Shop</Navbar.Brand>
        <Nav className="me-auto">
          <Nav.Link href="#features">Features</Nav.Link>
          <Nav.Link href="#pricing">Pricing</Nav.Link>
        </Nav>
        </Container>
      </Navbar>     
      <Routes>
        <Route path='/' element={<Main></Main>}></Route>
        <Route path='/detail' element={<Detail></Detail>}></Route>
      </Routes>
      </div>
  );
}

Routes 태그 안에 Route로 지정하고 싶은 경로들을 만들어주면 된다
그리고 Route 태그의 path, element 속성을 이용하여 경로와 보여줄 내용을 지정하면 된다
나는 아래처럼 구성하였다

/ 접속 시 => Main 컴포넌트
/detail 접속 시 => Detail 컴포넌트

Main 컴포넌트

function Main(){
  return(
    <>
    <div className='main-bg' style={{backgroundImage:`url(${img})`}}></div>
    <Container>
      <Row>
        <Card data={data}></Card>     
      </Row>
    </Container>
    </>
  )
}

Detail 컴포넌트

function Detail(){
  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> 
  )
}

4. Link 사용하기

위에서 url 지정을 완료하였는데
페이지를 이용하는 유저들은 주소창에 url을 입력하지 않고 링크를 타고 들어간다
a 태그와 유사하다고 생각하면 된다

✨ a 태그

• HTML 의 기본 요소로 클릭 시 href 속성의 URL 로 브라우저를 통해 이동한다
• 페이지 전체를 새로 불러오기 때문에 서버로부터 새로운 페이지를 요청하고 전체 페이지를 리프레시 한다
• SPA (single page application)에는 빠른 로딩과 상태 유지에 부적합할 수 있음

✨ link 태그

• 주로 React.js의 라우팅 아리브러리인 React Router에서 사용된다
• 클릭 시 to 속성에 지정된 경로로 클라이언트 사이드에서 라우팅 처리한다
• 페이지를 새로 불러오지 않고, DOM을 조적하여 브라우저의 URL만 변경하고 필요한 컴포넌트만을 업데이트하여 렌더링한다
  ➡ 페이지 로딩없이 빠른 페이지 전환 가능

나는 상품을 클릭할 때 detail 페이지로 이동시키기 위하여 Card 컴포넌트 안에 Link 태그를 추가하였다

function Card({data}){
  return(
    <>
      {data.map((item,i)=>(
        <Col key={i}>
            <Link to="/detail">
            <img src={`https://codingapple1.github.io/shop/shoes${i+1}.jpg`} alt="img" width="80%" />
            <h4>{item.title}</h4>
            <p>{item.price}원</p>
           </Link>
           </Col>
        ))}
     </>
  )
}

Link 태그 추가 시 a 태그처럼 파란 글씨에 밑줄이 생기므로 css에서 스타일 지정을 통해 없앴다

a 태그에 스타일을 주며 해결이 되었다

a{
  text-decoration: none;
  color:black
}