카드 만들기

카드를 만들기 전에 틀을 조금 짜주자.

밑에 코드는 LandingPage.js의 return 부분이다. 

    return (
        <div style={{ width: '75%', margin: '3rem auto' }}>
            <div style={{textAlign: 'center'}}>
                <h2>Let's Travel Anywhere <Icon type="rocket"/></h2>
            </div>

            {/* Filter */}

            {/* Search */}
            
            <Card
            >
            </Card>

            <div style={{display:'flex', justifyContent: 'center'}}>
                <button>더보기</button>
            </div>
        </div>
    )

 

 

카드 컴포넌트를 사용할 때 저런식으로 넣어주면 되지만, 여러 개를 사용할 경우 일일이 컴포넌트를 계속해서 추가해 줄 필요가 없다. 그래서 useState를 이용하여 서버로부터 받은 product들을 state로 저장해서 map함수를 이용하여 간결하게 코드를 구현해 줄 수 있다. 강의에서는 해당 구현 파트를 따로 함수로 구현해서 더욱 간결하게 코드를 구현했다. 

 

import axios from 'axios';
import React, { useEffect, useState } from 'react'
import {Icon, Col, Row, Card} from 'antd'
import Meta from 'antd/lib/card/Meta';


function LandingPage() {

    const [Products, setProducts] = useState([])

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

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

    const renderCards = Products.map((product, index) => {
        return (
            <Col lg={6} md={8} xs={24} key={index}>
                <Card
                    cover={<img style={{width:'100%', maxHeight:'150px'}} src={process.env.REACT_APP_SERVER + `/${product.images[0]}`} />}>
                    <Meta
                        title={product.title} 
                        description={`${product.price}`}
                    />
                </Card>
            </Col>
        )
    })

    return (
        <div style={{ width: '75%', margin: '3rem auto' }}>
            <div style={{textAlign: 'center'}}>
                <h2>Let's Travel Anywhere <Icon type="rocket"/></h2>
            </div>

            {/* Filter */}

            {/* Search */}

            <Row gutter={[16, 16]}>
               {renderCards}
            </Row>

            <div style={{display:'flex', justifyContent: 'center'}}>
                <button>더보기</button>
            </div>
        </div>
    )
}

export default LandingPage

 

antd css framework 사용법은 밑에 링크에 다 나와있다.

https://ant.design/components/grid

Grid - Ant Design

 

 

*.env*

gitpod을 쓰면서 SERVER 주소가 자꾸 바뀐다..

그래서 FileUpload.js 파일에서 이미지를 띄우거나, LandingPage.js에서 이미지를 갖고올 때 주소 등등엔 SERVER 주소가 들어간다. 자주 바뀌는 서버 주소를 하나의 환경 변수로 넣어줘서 하나의 파일만 바꿔서 다른 중복되는 코드들을 배제해주기 위해서 .env 파일을 사용했다. 밑에는 참고했던 사이트다.

https://velog.io/@sweetpumpkin/React-%ED%99%98%EA%B2%BD%EB%B3%80%EC%88%98%EA%B0%80-undefined%EB%A1%9C-%EB%82%98%EC%98%AC-%EB%95%8C

[React] 환경변수가 undefined로 나올 때

gitpod 서버를 켰을 때 꼭 .env 파일의 REACT_APP_SERVER 주소를 바꿔주자