[React] 상품 상세페이지 만들기 : 어떻게 여러 페이지를 한 번에 구분할 수 있을까?

 

 

1. 에러가 왜 생길까?

오늘의 에러

여러 페이지를 구분하지 않고, 똑같은 페이지를 불러오면 이런 에러가 난다.

key가 필요해~ key~~

 

비어있는 상세페이지 띠용...

심지어 결과물을 돌려주지도 않는다...

 

원래였으면, product 폴더 아래 자동으로 실행되는 product > index.js가 실행되어야 하는데 말이다...

 

function ProductPage(){
    return <h1>상품 상세 페이지</h1>
}

export default ProductPage;

이 h1 태그가 안나온다.

 

 

만약 링크 조차 넘어가지지 않을 경우에는 리액트가 가장 먼저 켜질 때 실행되는 index.js의 <React.StrictMode> 태그를 지우면 잘 나온다.

 

 

2. 제품 상세페이지의 각 페이지를 구분해서 보여주자 

리액트를 실행시키면 index.js로 먼저 가고, 여기서 App.js를 실행시킨다.

 

[App.js]

import './App.css';
//index.js 생략 가능 
import MainPageCompnent from "./main/index.js"
import {Switch, Route} from 'react-router-dom';
import UploadPage from './upload';
import ProductPage from './product';

function App() {
  return (
    <div>
      <Switch>
        <Route exact={true} path={"/"}>
          <MainPageCompnent></MainPageCompnent>
        </Route>
      </Switch>

      <Switch>
        <Route exact={true} path={"/products/:id"}>
          <ProductPage></ProductPage>
        </Route>
      </Switch>

      <Switch>
        <Route exact={true} path={"/upload"}>
          <UploadPage></UploadPage>
        </Route>
      </Switch>
    </div>
    
    );
    
}

export default App;

Route path에 원래는 /product 경로만 써주었는데, 페이지 구분 값을 id로주어서 페이지를 구분하도록 했다. 

그 후 해당 라우터가 불러지면, id를 가지고, <ProductPage/>가 실행된다. 이 친구는 ./product 경로에 있는 index.js로 들어간다.

 

 

[product > index.js]

import {useParams} from "react-router-dom";
function ProductPage(){
    const {id} = useParams();
    
    return <h1>상품 상세 페이지 {id} 상품</h1>
}

export default ProductPage;

react-router-dom의 useParams를 이용해 App.js에서 가져온 id 값을 사용할 것이다.

각 상품 페이지마다 다른 아이디가 뜨는 것을 확인하기 위함이다.

 

이렇게 url에 App.js에서 정해준 path를 치면 각 상품 번호 별 다른 페이지가 뜨는 것을 확인할 수 있다.

 

이제 메인 페이지에도 적용해보자!

 

 

[main > index.js]

//가존 export를 맨아래에 적어주던 js와는 달리 css는 적어주지 않았다.
//이럴 때는 import시 from을 없앤다.
import './index.css';
import axios from "axios";
import React from 'react';
import {Link} from 'react-router-dom';

function MainPage(){
  //products는 일반적으로 배열이기 때문에 기본값으로 빈배열을 넣어준다.
  const [products, setProducts]=React.useState([]);
  React.useEffect(function(){
    //이전 프로젝트에서 각자 만든 mock서버를 가져온다.
  //프로미스 함수이기 때문에 결과가 프로미스 객체로 온다 때문에 then을 꼭 써줘야한다.
  axios.get("https://1771c96e-64d6-4579-9e75-e3aee90caeb9.mock.pstmn.io/products")
  .then(function(result){
    const products = result.data.products;
    setProducts(products);//여기가 불리면 네트워크 통신이 다시 일어나서 렌더링 반복 때문에 이를 방지하기 위해 useEffect를 써준다.
  }).catch(function(error){
    console.error('에러 발생 : ', error);
  });
  }, []);
  
  // 복수개의 div 등의 태그들을 리턴할 수 없다.
  //때문에 1개의 div로 씌워줘야 한다.
  return (
    <div>
      <div id="header">
        <div id="header-area">
          <img src="images/icons/logo.png" />
        </div>
      </div>
      <div id="body">
        <div id="banner">
          <img src="/images/banners/banner1.png" />
        </div>
        <h1>판매되는 상품들</h1>
        <div id="product-list">
          {
            // map은 순회함수이다.
            //map의 특징 중 하나는 리턴이 가능하다는 것이다.
            products.map(function(product, index){
              return(
                <div className="product-card">
                  
                  <Link className="product-link" to={`/products/${index}`}>
                    <div>
                      <img className="product-img" src={product.imageUrl}></img>
                    </div>
                    <div className="product-contents">
                      <span className="product-name">{product.name}</span>
                      <span className="product-price"> {product.price}원 </span>
                      <div className="product-seller">
                        <img className="product-avatar" src="images/icons/avatar.png"></img>
                        <span>{product.seller}</span>
                      </div>
                    </div>
                  </Link>
            </div>
              );
            })
          }
          
            
          
        </div>
      </div>
      <div id="footer"></div>
    </div>
  );
}

export default MainPage;

 

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

해당 코드로 Link를 사용해 메인페이지에서 각 상품을 클릭했을 때, 0부터 도는 map함수 파라미터의 index를 사용하여 상세페이지로 연결할 것이다.

 

<h1>판매되는 상품들</h1>
        <div id="product-list">
          {
            // map은 순회함수이다.
            //map의 특징 중 하나는 리턴이 가능하다는 것이다.
            products.map(function(product, index){
              return(
                <div className="product-card">
                  
                  <Link className="product-link" to={`/products/${index}`}>
                    <div>
                      <img className="product-img" src={product.imageUrl}></img>
                    </div>
                    <div className="product-contents">
                      <span className="product-name">{product.name}</span>
                      <span className="product-price"> {product.price}원 </span>
                      <div className="product-seller">
                        <img className="product-avatar" src="images/icons/avatar.png"></img>
                        <span>{product.seller}</span>
                      </div>
                    </div>
                  </Link>
            </div>
              );
            })
          }
          
            
          
        </div>

하나의 product-card 요소의 정보들에다가 <Link>를 적용한다.

클릭했을 때 어디로 향할지는 to를 통해 써준다.

/products/index 방향으로 가도록 지시해주었다.

 

만약 농구공 상세페이지를 보고 싶어 농구공을 누른다?

 

index가 0이기 때문에 0번 상세페이로 안내하는 것을 확인할 수 있다.

 

 

---

오늘의 기록 끝~