[React]22 리액트쇼핑몰만들기ver0.1 (서버에서 상품정보받아오기)

화장품을 파는 쇼핑몰 사이트를 만들어보자!!

메인페이지, 상품페이지, 상품업로드 페이지를 만들고 각 페이지는 폴더를 따로 만들어서 저장한다.

컴포넌트폴더를 만들고  Header와 Footer (상단화면 하단화면)을 만들어 준다.

메인페이지에 들어갈 상품태그도 컴포넌트로 만들어서 컴포넌트 폴더에 넣어주겠다.

 

코드샌드박스로 코드를 올릴 텐데 서버는 에러가뜨고 로컬에 있는 mysql이랑 어떻게 연결하는지 몰라서 리액트만 코드샌드박스로 올리고 서버와 mysql연결하는 부분은 코드로 올리겠다..

 

우선 header 와 footer main page를 만들어준다

 

Header.js /Header.css

import React from 'react';
import { Link } from 'react-router-dom';
import './Header.css';
const Header = () => {
    return (
        <div className='header'>
            <h1><Link to='/'>Cosmeticsv</Link></h1>
            <ul>
            <li>스킨케어</li>
            <li>메이크업</li>
            <li><Link to='/upload'>제품등록</Link></li>
            </ul>
        </div>
    );
};
export default Header;

-----------------------------------------------------------------------------------------------

Header.css
a{
    text-decoration: none;
    color: inherit;
}
.header{
    display: flex;
    width: 100%;
    max-width: 1200px;
    padding: 20px;
    justify-content: space-between;
    margin: 0 auto;
}
.header ul{
    display: flex;
}
.header li{ padding:0 20px; list-style: none; }

Header에서는 제목을 클릭하면 메인화면으로 빠져나갈 수 있게 Link를 넣어주었고 제품등록을 클릭하면 제품등록창으로 이동할 수 있게 Link를 넣어주었다.

 

Footer.js /Footer.js

import React from 'react';
import './Footer.css'

const Footer = () => {
    return (
        <div className='footer'>
            <div className='info'>
                <div className='inner'>
                    <div >
                        <h2>무통장입금계좌</h2>
                        <div>
                            <p>BANK ACCOUNT</p>
                            <p>301-1234-5678-01</p>
                            <p>예금주 - 김혜라</p>
                        </div>
                    </div>
                    <div>
                        <h2>고객센터</h2>
                        <div>
                            <p>영업시간 이외에는 문의 게시판을 이용해주시면 당담자 확인 후 빠른 답변 도와드리겠습니다.</p>
                            <p>02-1263-1245</p>
                        </div>
                    </div>
                    <div>
                        <h2>공지사항</h2>
                        <ul>
                            <li>조명가이드 2022-06-20</li>
                            <li>신상품 입고 안내 2022-06-10</li>
                            <li>몰 오픈을 축하드립니다. 2022-02-20</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div className='footermenu'>
                <div className='inner'>
                    <ul>
                        <li>홈</li>
                        <li>매장안내</li>
                        <li>이용약관</li>
                        <li>개인정보처리방침</li>
                    </ul>
                </div>
            </div>
            <div className='address'>
                <div className='inner'>
                상호 :  주소 : 울산광역시 남구 어딘가 대표전화 : 국번없이 123-456-7891 대표이사 : 김OO 개인정보관리자 : 이OO 사업자 등록번호 : 102-12-12345 copyright(c) Greck Lamp,.LTD all rights reserved.
                </div>
            </div>
        </div>
    );
};

export default Footer;
----------------------------------------------------------------------------------------------------------------------
Footer.css

.footer {
    margin-top: 60px;
    text-align: left;
}
.info{
    border-top:3px solid #333;
    border-bottom:1px solid #333;
    padding: 20px 0;
}
.inner{
    width:100%;
    max-width:1200px;
    margin: 0 auto;
}
.info .inner{
    display: flex;
    justify-content: space-between;
}
.info .inner > div{
    width: 32%;
    padding-bottom:20px ;
    line-height: 1.8;
}
.info .inner h2{
    border-bottom: 1px solid #ccc;
    line-height: 50px;
    font-size: 20px;
}

.info .inner > div div{
    padding:20px 0 ;
}
.info .inner > div ul {
    padding: 20px 0;
}
.footermenu ul{
    display: flex;
    height:60px;
    align-items: center;
}
.footermenu ul li{
    padding: 0 20px;
    border-right: 1px solid #ccc;
}
.footermenu ul li:last-child{
    border-right:none;
}
.address{
    border-top:1px solid #ccc;
    background-color: #eee;
    padding: 30px 0;
}

 

Footer는 좀 긴데 일반 사이트처럼 별로 기능은 들어간게없고 그냥 정보를 알려주는 용도이다. 

 

ProductList.js

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

const ProductList = ({p_id,p_price,p_name}) => {
    return (
        <li>
            <Link to={`/detailView/${p_id}`}>
                <img src={`../images/cosmetic${p_id}.JPG`} alt="" />
                <h3>{p_name}</h3>
                <p>{p_price}원</p>
                <p>간단한 설명입니다.</p>
            </Link>
        </li>
    );
};

export default ProductList;

ProductList는 메인페이지 의 ul태그에 넣어줄 컴포넌트이다 같은 li태그 구조가 반복되기 때문에

컴포넌트로 만들고 달라지는 이미지와 상품명 가격은 props로 받아서 넣어준다.

 

Header와 Footer는 components폴더에 넣어서 보관해준다.

 

index.js / index.css (src/main폴더)

import React from 'react';
import { Link } from 'react-router-dom';
import ProductList from '../components/ProductList';
import './index.css';

const data=[ //이 데이터를 서버에서 받아올거임
	{
		p_id:"1",
    	p_name:"상품1",
        p_price:"10000",
    },
    {
		p_id:"2",
    	p_name:"상품2",
        p_price:"20000",
    },
    {
		p_id:"3",
    	p_name:"상품3",
        p_price:"30000",
    },
    {
		p_id:"4",
    	p_name:"상품4",
        p_price:"40000",
    },
]

const MainPage = () => {    
    return (
        <div className='main'>
            <div className='visual'>
                <img src ="images/banner1.jpg" alt="배너이미지1"/> 
            </div>
            <div className='product'>
                <h2>신상품</h2>
                <ul>
                    {data.map(pro=>
                    <ProductList key={pro.p_id} p_id={pro.p_id} p_name={pro.p_name} p_price={pro.p_price}/>)}
                </ul>
            </div>
        </div>
    );
};

export default MainPage;

----------------------------------------------------------------------------------------------------------
index.css

.visual img{
    width: 100%;
}
.product{
    width:100%;
    max-width: 1200px;
    margin: 0 auto;
}
.product h2{
    padding-bottom:40px
}
.product ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.product ul li{
    width:25%;
    /* border: 1px solid #ddd; */
    padding-bottom: 20px;
}
.product ul li img{
    width: 100%;
}
.product ul li h3{
    padding: 10px;
}
.product ul li p {
    padding: 0 10px;
}

 

 

원래 mainpage에 들어갈 이미지는 mysql에서 받아와야 하는데 코드샌드박스로는 할 수 없기 때문에

data 객체 를 따로 코드 안에 만들어 주었다. 

 

이제 상품이미지를 클릭했을 때 상품상세화면으로 들어가게 해 주겠다. 

ProductList.js에서 이미지를 클릭할 때 이동할 링크를 '/detailView/${p_id}'로 줬기 때문에

App에서도 <Route path = '/detailView/:p_id' element=(<ProductPage/>)/>를 넣어서 받아준다

function App() {
  return (
    <div className="App">
      <Header/>
      <Routes>
        <Route path='/' element={<MainPage/>}/>
        <Route path='/detailView/:p_id' element={<ProductPage/>}/>
      </Routes>
      <Footer/>
    </div>
  );
}

 

이제 ProductPage를 만들어보자

 

index.js /index.css (src / product폴더)

import React from 'react';
import { useParams } from 'react-router-dom';
import './index.css'

const ProductPage = () => {
    const {p_id} = useParams();

    return (
        <div className='productDetail'>
            <h2>기초스킨케어 세트</h2>
            <div className='productImg'>
                <img src={`../images/cosmetic${p_id}.JPG`} alt="" />
            </div>
            <div>
                <p>스킨케어 주간 베스트</p>
                <p>헤라 스킨</p>
                <p>가격 : 65,000</p>
                <p>무료배송</p>
            </div>
        </div>
    );
};

export default ProductPage;
-------------------------------------------------------------------------------------------------

.productDetail{
    margin: 0 auto;
    width:100%;
    max-width: 1200px;
}
.productDetail h2{
    padding-top: 30px;
    padding-bottom: 30px;
}
.productImg{
    text-align: center;
}
.productImg img{
    border-radius:50% ;
}

ProductPage에서는 ProductLists에서 Link에  /detailView/${p_id}를 넣어준 것을

useParams( )로 객체로 받아서 값을 

p_id에 할당해 주고 이미지 src를 설정하는 데 사용한다.

 

상품을 추가해 주는 upload페이지도 만들어 보겠다.

 

index.js/index.css (src / upload폴더)

import React from 'react';
import './index.css'

const UploadPage = () => {
    return (
        <div className='upload'>
            <h2>제품등록하기</h2>
            <form>
                <table>
                    <thead></thead>
                    <tbody>
                    <tr>
                        <td>상품사진</td>
                        <td>
                            <input type="file" name="p_img" />
                            
                        </td>
                    </tr>
                    <tr>
                        <td>상품이름</td>
                        <td>
                            <input type="text" name="p_name" />
                            
                        </td>
                    </tr>
                    <tr>
                        <td>상품소개</td>
                        <td>
                            <input type="text" name="p_info" />
                            
                        </td>
                    </tr>
                    <tr>
                        <td>상품가격</td>
                        <td>
                            <input type="number" name="p_price" />
                            
                        </td>
                    </tr>
                    <tr>
                        <td>상품수량</td>
                        <td>
                            <input type="number" name="p_quantity" />
                        </td>
                    </tr>
                    <tr>
                        <td>상세설명</td>
                        <td>
                            <textarea name="p_desc" ></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td colSpan={2}>
                            <button type='submit'>등록</button>
                            <button>취소</button>
                        </td>
                    </tr>
                   </tbody>
                    <tfoot></tfoot>
                </table>
            </form>
        </div>
    );
};

export default UploadPage ;

------------------------------------------------------------------------------------------------

.upload{
    margin: 40px auto;
    width: 100%;
    max-width:1200px;
}
.upload h2{
    font-size: 24px;
    padding-bottom:20px;
}
.upload table{
    border-collapse: collapse;
    width: 100%;
}
.upload td{
    border-bottom: 1px solid #ccc;
    padding: 16px;
}
.upload td:nth-child(1){
    width:20%;
}
.upload input[type='text'], .upload textarea{
    width:100%;
}

upload페이지는 아직 형태만 만들어놓고 아무 기능도 추가하지 않았다

나중에는 추가했을 때 서버로 데이터가 전송되도록 해줄 것 같다.

upload페이지로 이동하는 주소는 Header에서  <Linkto='/upload'> 제품등록 </Link>으로 주고 있다. 

 

App.js 

import './App.css';
import Header from './components/Header';
import Footer from './components/Footer';
import MainPage from './main';
import ProductPage from './product';
import { Routes,Route } from 'react-router-dom';
import UploadPage from './upload';

function App() {
  return (
    <div className="App">
      <Header/>
      <Routes>
        <Route path='/' element={<MainPage/>}/>
        <Route path='/detailView/:p_id' element={<ProductPage/>}/>
        <Route path='/upload' element={<UploadPage></UploadPage>}/>
      </Routes>
      <Footer/>
    </div>
  );
}

export default App;

App에서 일치하는 경로에 따라 Route들을 렌더링 해주고 있다. 

 

 

 

 

데이터를 서버에서 받아오기

 

서버코드

//express 서버 만들기
const express = require("express");//import express
const cors = require("cors");

//mysql부르기
const mysql = require("mysql");

//서버 생성 --> express( )호출
const app = express();
//프로세서의 주소 포트번호 지정
const port = 8080;
// JSON형식의 데이터를 처리할수 있도록 설정
app.use(express.json());
// 브라우저의 CORS 이슈를 막기 위해 사용하는 코드
app.use(cors());

//sql 연결선 만들기
const conn = mysql.createConnection({
    host:"localhost",
    port:'3306',
    user:"root",
    password:"1234",
    database:"shopping"
})
//sql 연결하기 
conn.connect();



// get요청시 응답 app.get(경로,콜백함수)
app.get('/products',(req,res)=>{
    conn.query('select * from products',function(error,result,fields){
        res.send(result);
    });
})


//서버구동
app.listen(port,()=>{
    console.log("서버가 돌아가고있습니다.")
})

(서버실행방법: 터미널에 node 서버이름.js 입력) 

서버에서 로컬에 있는 데이터베이스에 접근해서 데이터를 가져와서 응답으로 보내준다.

 

서버에서 보내주는 값은 사이트에서 axios로 받아온다

 

커스텀훅 

useAsync.js

import React, { useEffect, useReducer } from 'react';
//1.상태초기화
const initialState = {
    loading:false,
    data:null,
    error:null,
}
//2.리듀서 함수구현
//로딩중일때 상태
//데이터를 성공적으로 받았을때 상태
//에러일때 상태
function reducer(state,action){
    switch(action.type){
        case "LOADING":
            return{
                loading:true,
                data:null,
                error:null,
            }
        case "SUCCESS":
            return{
                loading:false,
                data:action.data,
                error:null,
            }
        case "ERROR":
            return{
                loading:false,
                data:null,
                error:action.error,
            }
        default:
            return state;
    }
}


const useAsync = (callback,deps=[]) => {
    const [state,dispatch] = useReducer(reducer,initialState);
    //데이터 요청 함수
    const fetchData = async ()=>{
        //로딩의 value를 true로 업데이트
        dispatch({
            type:"LOADING"
        });
        // try catch 에러 처리 구문 ,,데이터를 요청하는 과정은 에러발생할 확률이 높음
        try{
            //axios에서 받는 함수가 들어감 useAsync를 사용하는 컴포넌트에서 각각 다른 주소를 넣어서 보내줌
            const data = await callback(); 
            dispatch({
                type:"SUCCESS",
                data  //data : data 인데 같으니까 생략가능함
            })
        }
        catch(e){
            dispatch({
                type:"ERROR",
                error:e
            })
        }
    }
    useEffect(()=>{
        fetchData();
    },deps)
    return state;
};

export default useAsync;

데이터를 받았을 때 상태를 바꿔주는 커스텀 훅을 만들어주고 

 

main.js

import axios from 'axios';
import React from 'react';
import { Link } from 'react-router-dom';
import ProductList from '../components/ProductList';
import useAsync from '../customHook/useAsync'
import './index.css';

async function productFetch(){
    const response = await axios.get("http://localhost:8080/products");
    return response.data
}

const MainPage = () => {
    const state = useAsync(productFetch,[])
    const{loading,error,data}=state;
    if (loading) return <div>로딩중</div>
    if (error) return <div>에러발생</div>
    if (!data) return null
    console.log(data)
    return (
        <div className='main'>
            <div className='visual'>
                <img src ="images/banner1.jpg" alt="배너이미지1"/>
            </div>
            <div className='product'>
                <h2>신상품</h2>
                <ul>
                    {data.map(pro=>
                    <ProductList key={pro.p_id} p_id={pro.p_id} p_name={pro.p_name} p_price={pro.p_price}/>)}
                </ul>
            </div>
        </div>
    );
};

export default MainPage;

메인화면에서 useAsync를 import 해서 사용 useAsync에 파라미터로 입력한 주소의 데이터를 얻어서

리턴해주는 함수와 빈 배열을 넣어준다. 이렇게 넣어주면 useAsync의 콜백함수로 들어가서

주소에서 받아온 데이터가 data상태값에 들어가게 되고 useAsync에서 반환해 주는 state값을

Mainpage에서 받아서 이용할 수 있게 된다.