리덕스_10_게시글 상세내역 보기

2020/06/06 - [redux] - 리덕스_9_게시글 내용 보기

리덕스_9_게시글 내용 보기

1. foodAction.js를 만든다. 여기서 함수를 만들어준다. 

action 함수를 만들어서 쓰면 더 편하다. 

import {FETCH_FOOD_DETAIL} from "./types";
import axios from 'axios'

export function fetchFoodDetail(no) {
    return function (dispatch) {
        axios.get('http://localhost:3355/food_detail',{
            params:{
                no:no
            }
        }).then((result)=>dispatch({
            type:FETCH_FOOD_DETAIL,
            payload:result.data
        }))
    }
}

 

2. FoodDetail을 구성한다. 

import React, {useEffect, useState} from "react";
import {fetchFoodDetail} from "../actions/foodActions";
import {useDispatch, useSelector} from "react-redux";

export default function FoodDetail(props) {
    const dispatch= useDispatch();
    const{match}= props
    useEffect(()=>{
        dispatch(fetchFoodDetail(match.params.no))
    },[])

    const  food_data =useSelector((state)=>state.foods.food_detail)
    const image2 = String(food_data.image)
    const image = image2.split(",")
    const html=image.map((m)=>
            <td>
                <img src={m} width={"200"} height={"200"}/>
            </td>
    )
    return(
        <div className={"row"}>
            <table>
                <tr>
                    {html}
                </tr>
                <tr>
                    <td className={"text-center"} colSpan={"4"}></td>
                    {food_data.title}
                </tr>
                <tr>
                    <td width={"10%"}>주소</td>
                    <td colSpan={"3"}>{food_data.address}</td>
                </tr>
                <tr>
                    <td width={"10%"}>전화</td>
                    <td colSpan={"3"}>{food_data.tel}</td>
                </tr>
                <tr>
                    <td width={"10%"}>음식종류</td>
                    <td colSpan={"3"}>{food_data.kind}</td>
                </tr>
                <tr>
                    <td width={"10%"}>가격대</td>
                    <td colSpan={"3"}>{food_data.price}></td>
                </tr>
            </table>
        </div>
    )
}

3. 클릭 이벤트를 준다. 

  CateFood.js에서 값을 넘겨주어야 한다. NavLink를 이용하면 된다.

 App.js에서 path를 <Route path={"/food_detail/:no"} component={FoodDetail}/>이렇게 수정해준다.

 <NavLink to={"/food_detail/"+m.no}>
<img src={m.image.substring(0,m.image.indexOf(","))} width={"100%"}/>
</NavLink>

*값이 안넘어 갈 경우 server를 보면 된다. 

app.get('/food_detail',(request,response)=>{
    var no = request.query.no;
    var url="mongodb://211.238.142.181:27017";//몽고디비 주소
    Client.connect(url,(err,client)=>{
        var db=client.db('mydb');
        db.collection('food').find({no:Number(no)})
            .toArray((err,docs)=>{
                // 요청한 사용자 => 데이터 전송
                response.json(docs[0]);
                console.log(docs)
                client.close();
            })
    })
})

결과) 음식점을 하나 누르면 이렇게 이미지와 정보가 나온다.