리덕스_9_게시글 내용 보기

2020/06/06 - [redux] - 리덕스_8_리스트 조회하기

리덕스_8_리스트 조회하기

이 포스팅을 연결해서 작성합니다.

 

1.  이미지를 클릭하면 다음 창으로 넘어가게 하기 위해 Category.js에서 NavLink 를 import 한다. 

이미지를 NavLink에 싸준다.

<NavLink to={"/cate_food/"+m.cateno}>
<img src={m.poster} alt="Lights" style={{"width": "100%"}}/>
</NavLink>

m.cateno를 CateFood.js에서 받게 해주려면 App.js에서 /cate_food/:cno 라고 해주어야 한다. 

import React from 'react';
import {BrowserRouter as Router,Route, Switch} from "react-router-dom";
import Category from "./components/Category";
import CateFood from "./components/CateFood";
import FoodDetail from "./components/FoodDetail";
import store from "./store/store";
import {Provider} from 'react-redux'

function App() {
  return (
      <Provider store={store}>
      <Router>
        <switch>
          <Route exact path={"/"} component={Category}/>
          <Route path={"/cate_food/:cno"} component={CateFood}/>
          <Route path={"/food_detail"} component={FoodDetail}/>
        </switch>
      </Router>
      </Provider>
  );
}

export default App;

2. CateFood.js 에서 dispatch로 값을 받아줘야한다.

import React,{useEffect} from "react";
import {useDispatch,useSelector} from "react-redux";
import axios from 'axios'

function CateFood(props) {
    const dispatch=useDispatch();

    useEffect(()=>{
        
    },[])

    return(
        <div className={"row"}>

        </div>
    )
}

export default CateFood

3.  server에 가서 cate_food 로 된 함수를 만든다.

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

cate_info로 된 함수도 만든다.

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

4. type.js에 들어가서 FETCH_CATE_INFO를 추가한다. 

//액션: 구분하는 문자열 저장
export  const FETCH_CATEGORY ='FETCH_CATEGORY'
export  const FETCH_CATE_FOOD ='FETCH_CATE_FOOD'
export  const FETCH_FOOD_DETAIL ='FETCH_FOOD_DETAIL'
export  const FETCH_CATE_INFO ='FETCH_CATE_INFO'

foodReducer.js에도 추가해준다. case 문에도 추가한다. 

import {FETCH_CATEGORY,FETCH_CATE_FOOD,FETCH_FOOD_DETAIL,FETCH_CATE_INFO} from "../actions/types";
const initialState ={
    category:[],
    cafe_food:[],
    food_detail:{},
    cate_info:{}
}




 case FETCH_CATE_INFO:
            return {
                ...state,
                cate_info: action.payload
            }

5. CateFood.js에 들어와서 FETCH_CATE_INFO와 FETCH_CATE_FOOD를 import해준다.

  useEffect를 이용해서 값을 가져온다.

    useEffect(()=>{
        axios.get('http://localhost:3355/cate_food',{
            params:{
                cno:props.match.params.cno
            }
        }).then((result)=>{
            dispatch({
                type:FETCH_CATE_FOOD,
                payload:result.data
            })
        })
    },[])

cate_info도 axios로 가져온다. 

   useEffect(()=>{
        axios.get('http://localhost:3355/cate_food',{
            params:{
                cno:props.match.params.cno
            }
        }).then((result)=>{
            dispatch({
                type:FETCH_CATE_FOOD,
                payload:result.data
            })
        })

        axios.get('http://localhost:3355/cate_info',{
            params:{
                cno:props.match.params.cno
            }
        }).then((result)=>{
            dispatch({
                type:FETCH_CATE_INFO,
                payload:result.data
            })
        })
    },[])

전체코드)

import React,{useEffect} from "react";
import {useDispatch,useSelector} from "react-redux";
import axios from 'axios'
import {FETCH_CATE_INFO, FETCH_CATE_FOOD} from "../actions/types";

function CateFood(props) {
    const dispatch=useDispatch();

    useEffect(() => {
        axios.get('http://localhost:3355/cate_food', {
            params: {
                cno: props.match.params.cno
            }
        }).then((result) => {
            dispatch({
                type: FETCH_CATE_FOOD,
                payload: result.data
            });
        });

        axios.get('http://localhost:3355/cate_info', {
            params: {
                cno: props.match.params.cno
            }
        }).then((result) => {
            dispatch({
                type: FETCH_CATE_INFO,
                payload: result.data
            });
        });
    }, []);

    const cate_food=useSelector((state)=>state.foods.cate_food);
    const cate_info=useSelector((state)=>state.foods.cate_info);
    const html= cate_food.map((m)=>
        <table className={"table"}>
            <tbody>
                <tr>
                    <td className={"text-center"} rowSpan={"3"} width={"30%"}>
                        <img src={m.image.substring(0,m.image.indexOf(","))} width={"100%"}/>
                    </td>
                    <td width={"70%"}>{m.title}</td>
                </tr>
                <tr>
                    <td>{m.address}</td>
                </tr>
                <tr>
                    <td>{m.tel}</td>
                </tr>
            </tbody>
        </table>
    )

    return(
        <div className={"row"}>
            <h1 className={"text-center"}>{cate_info.title}</h1>
            <h3 className={"text-center"}>{cate_info.subject}</h3>
            <table>
                <tr>
                    <td>
                        {html}
                    </td>
                </tr>
            </table>
        </div>
    )
}

export default CateFood

이제 음식하나를 누르면 자세히보기가 나온다.