[코딩애플] 쇼핑몰 프로젝트 Part2 - 컴포넌트, 리액트 라우터, usenavigate()

// data.js 파일

let data = [
  {
    id : 0,
    title : "White and Black",
    content : "Born in France",
    price : 120000
  },

  {
    id : 1,
    title : "Red Knit",
    content : "Born in Seoul",
    price : 110000
  },

  {
    id : 2,
    title : "Grey Yordan",
    content : "Born in the States",
    price : 130000
  }
] ;
export default data

// App.js 파일

import data from './data.js';

function App(){
  let [shoes] = useState(data);
  return (
    <div className="App">
      (생략)
      <div className="container">
        <div className="row">
          <div className="col-md-4">
            <img src="https://codingapple1.github.io/shop/shoes1.jpg" width="80%" />
            <h4>{ shoes[0].title }</h4>
            <p>{ shoes[0].price }</p>
          </div>
          <div className="col-md-4">
            <img src="https://codingapple1.github.io/shop/shoes2.jpg" width="80%" />
            <h4>상품명</h4>
            <p>상품정보</p>
          </div>
          <div className="col-md-4">
            <img src="https://codingapple1.github.io/shop/shoes3.jpg" width="80%" />
            <h4>상품명</h4>
            <p>상품정보</p>
          </div>
        </div>
      </div>
    </div>
  )
}

}

 
 
💁‍♀️ html 긴 부분 컴포넌트로 만들어보기

function App(){
  return (
    <div className="App">
      (생략)
      <div className="container">
        <div className="row">
          <Card/>
          <Card/>
          <Card/>
        </div>
      </div>
    </div>
  )
}

function Card(){
  return (
    <div className="col-md-4">
      <img src="https://codingapple1.github.io/shop/shoes1.jpg" width="80%" />
      <h4>상품명</h4>
      <p>상품정보</p>
    </div>
  )
}

💁‍♀️ shoes에 있던 거 Card 컴포넌트 안에 꽂아넣기

// function App 내부

<Card shoes={shoes[0]} i={1} />
<Card shoes={shoes[1]} i={2} />
<Card shoes={shoes[2]} i={3} />

function Card(props){
  return (
    <div className="col-md-4">
      <img src={'https://codingapple1.github.io/shop/shoes' + props.i + '.jpg'} width="80%" />
      <h4>{ props.shoes.title }</h4>
      <p>{ props.shoes.price }</p>
    </div>
  )
}

💁‍♀️ 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> 
  )
}

export default Detail

// App.js 에서 활용

import Detail from './routes/Detail.js'

function App(){
  return (
    (생략)
    <Route path="/detail" element={ <Detail/> } />
  )
}

 
 

✏️ 리액트 라우터

✏️ react-router-dom 설치
- 터미널 열어서 npm install react-router-dom@6 입력해서 설치
- 셋팅은 index.js 파일로 가서 import~ gkrh <BrowserRouter> 이걸로 <App />을 감싼다.

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

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

✏️ 라우터로 페이지 나누는 법
- url 경로마다 다른 페이지를 보여주고 싶으면 아래와 같이 작성

// App.js

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

function App(){
  return (
    (생략)
    <Routes>
      <Route path="/" element={
        <>
        <div className="main-bg"></div>
        <div className="container">
          <div className="row">
            { shoes.map((a, i)=>{
              return <Card shoes={shoes[i]} i={i} ></Card>
             })}
          </div>
        </div> 
        </>
      } /> 
      <Route path="/detail" element={ <div>상세페이지임</div> } />
      <Route path="/about" element={ <div>어바웃페이지임</div> } />
    </Routes>
  )
}

1. 우선 상단에서 여러가지 컴포넌트 import 해오고
2. <Routes> 만들고 그 안에 <Route> 작성
3. <Route path="/경로" element={ <보여줄html> } /> 작성

✏️ 페이지 이동 버튼
- 링크를 클릭해 이동

import { Link } from 'react-router-dom';

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

✏️ 페이지 이동기능 만들기: usenavigate()
- Link 쓰면 못생겼음

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

function App(){
  let navigate = useNavigate()
  
  return (
    (생략)
    <button onClick={()=>{ navigate('/detail') }}>이동버튼</button>
  )
}

- -1 넣으면 뒤로 1번 가기, 2 넣으면 앞으로 2번 가기 기능

✏️ 404 패이지

 <Route path="*" element={ <div>없는페이지임</div> } />

- * 경로는 모든 경로를 뜻해서 위에 만들어둔 /detail 이런게 아닌 이상한 페이지 접속시 * 경로로 안내

✏️ 서브경로 만들 수 있는 nested routes

<Route path="/about" element={ <About/> } >  
  <Route path="member" element={ <div>멤버들</div> } />
  <Route path="location" element={ <div>회사위치</div> } />
</Route>

- <Route> 안에 <Route> 를 넣는 것을 Nested routes 라고 부른다.
- 위와 같이 사용하면 /about/member로 접속시 <About> & <div>멤버들></div>을 보여주고
- /about/location으로 접속시 <About> & <div>회사위치</div> 을 보여준다.
- 실제로 위 코드는 /about/memeber로 접속시 <About>안에 <div>멤버들</div>을 보여준다.
- <About> 컴포넌트 안에 <div>를 어디다 보여줄지 표기해야 잘 보여줌

function About(){
  return (
    <div>
      <h4>about페이지임</h4>
      <Outlet></Outlet>  <!-- nested routes 안의 element들을 어디에 보여줄지 표기하는 곳 -->
    </div>
  )
}

✏️ 상세페이지에 상품명 넣기
- shoes라는 state에 있던 상품 정보들을 Detail 컴포넌트에 넣어보자.

// App.js
<Route path="/detail" element={ <Detail shoes={shoes}/> }/>  // <Detail> 쓰는 곳에서 일단 props 전송

// Detail.js
<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 mt-4">
      <h4 className="pt-5">{props.shoes[0].title}</h4>  <!-- 0번째 상품 -->
      <p>{props.shoes[0].content}</p>
      <p>{props.shoes[0].price}원</p>
      <button className="btn btn-danger">주문하기</button>
    </div>
  </div> 
</div>

✏️ 상세페이지 여러개 만들기

<Route path="/detail/:id" element={ <Detail shoes={shoes}/> }/>  <!-- url 파라미터 사용 -->

<!-- 결과: /detail/0 /detail/1 /detail/2 -->

- path 작명할 때 /:어쩌구 이렇게 사용하면 "아무 문자"를 뜻한다.
- 그래서 위의 <Route>는 누군가 주소창에 /detail/아무거나 입력했을 때 <Detail> 컴포넌트를 보여달라는 뜻

✏️ 페이지마다 다른 내용 보여주기

import { useParams } from 'react-router-dom'

function Detail(){
  let {id} = useParams();  // /:url 파라미터 자리가 유저가 입력한 값을 가져올 수 있음
  console.log(id)
  
  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 mt-4">
        <h4 className="pt-5">{props.shoes[id].title}</h4>
        <p>{props.shoes[0].content}</p>
        <p>{props.shoes[0].price}원</p>
        <button className="btn btn-danger">주문하기</button>
      </div>
    </div>
  </div>
  )
}

---

본 포스팅은 << React 리액트 기초부터 쇼핑몰 프로젝트까지! >> 강의를 참고합니다.