리액트 _4_레시피 상세보기 페이지 만들기

2020/05/30 - [react] - 리액트 _3_이미지 클릭시 상세페이지로 이동하기

리액트 _3_이미지 클릭시 상세페이지로 이동하기

1. recipe_detail을 위한 서버를 하나 만든다.

app.get('/recipe_detail',(request,response)=>{
    var no= request.query.no; //문자 1이 들어옴. 숫자아님 그래서 쓸 때 숫자로 변형시켜줘야 함.
    //몽고db에 연결
    var url="mongodb://211.238.142.181:27017";
    Client.connect(url,(err,client)=>{
        var db = client.db('mydb');
        db.collection('recipe_detail').find({no:Number(no)}).toArray((err,docs)=>{
            response.json(docs[0]);
            client.close();
        })
    })

})

2. recipe_detail.js에서 출력한다.

   **var a ={}  : object

   **var a =[]  : array

   const [detail,setDetail] =useState({});

  ==> detail에다가 값을 담아놓는다는 것.

    useEffect(()=>{
        axios.get('http://localhost:3355/recipe_detail',{
            params:{
                no:match.params.no
            }
        }).then((result)=>{
            setDetail(result.data)
        })
    },[])

   ==> 값을 받아서 출력해주는 useEffect를 작성한다.

 

return 부분에 출력할 모양을 잡아준다.

 return(
        <div className={"row"} style={{"margin":"0px auto", "width":"900px"}}>
            <table className={"table"}>
                <tr>
                    <td colSpan={"3"}>
                        <img src={detail.poster} width={"700"} height={"350"}/>
                    </td>
                </tr>
                <tr>
                    <td colSpan={"3"}>
                        <h3>{detail.title}</h3>
                    </td>
                </tr>
                <tr>
                    <td colSpan={"3"}>
                        <h3>{detail.content}</h3>
                    </td>
                </tr>
            </table>
        </div>

결과) 상세페이지가 보여진다.