react-shop-web/front & back

데이터베이스에 들어있는 모든 상품을 가져오기

tjdvyzl 2023. 1. 24. 16:59

 

import axios from 'axios';
import React, { useEffect } from 'react'


function LandingPage() {

    useEffect(() => {

        // 원래라면 필터 기능을 위해 axios에 요청할 때 body 객체를 함께 보내주는데 현재 단계에선 모든
        // 상품을 갖고오기 때문에 아직까진 필요없다.

        axios.post('/api/product/products') 
            .then(response => {
                if(response.data.success){
                    console.log(response.data)
                }else {
                    alert('상품들을 갖고오는데 실패')
                }
            })

    })

    return (
        <div>
            LandingPage
        </div>
    )
}

export default LandingPage

LandingPage.js

 

router.post('/products', (req, res) => {
    
    // product collection에 들어있는 모든 상품 정보를 갖고오기 

    // Product DB에 있는 모든 상품 정보를 조건 없이 갖고올 땐 안에 아무것도 없이 그냥 Product.find() 이렇게만 해주면 된다.
    // 나중에 조건이 들어갈 땐 원하는 조건들을 안에 넣어주면 된다. ex) Product.find({Price: }) ~~
    Product.find()
        .populate("writer")
        .exec(( err, productInfo ) => {
            if (err) return res.status(400).json({ success: false, err })
            return res.status(200).json({success: true, productInfo})
    })
    
})

product.js에 위 코드를 추가해주자.

 

populate() 란?

DB에 보면 writer(상품을 누가 등록했는지에 대한 정보)가 있는데, DB엔 id값만 존재한다. 하지만 구현할 때 id뿐 만 아니라 등록한 사람의 이름, 이미지, 이메일 주소 등등이 필요하다. 그래서 이 id를 이용하여 이 writer의 모든 정보를 가질 수 있게 하기 위해서 populate()을 사용한다.