리액트 _6_쉐프 상세보기 페이지 만들기

 

2020/05/30 - [react] - 리액트_5_레시피 상세보기 페이지 만들기_2

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

이제 쉐프 자세히보기 페이지를 만들것이다.

 

1. recipe-server에다가 쉐프로 만든다.

이전에 작성한 부분에서 /chef와 collection부분만 바꾸면 된다. 

app.get('/chef',(request,response)=>{
    //request = 사용자가 보내준 요청 정보
    //요청 처리
    //response = 결과를 전송
    var page=request.query.page; //request.getParameter("page")
    var rowSize = 50;
    var skip=(page*rowSize)-rowSize;

    var url="mongodb://211.238.142.181:27017"; //몽고디비 주소
    Client.connect(url, (err,client)=>{
        var db = client.db('mydb');
        //db.collection('recipe').find({})  == select * from recipe
        //find({"title":{"$regex":".*"+값}} == select * from recipe where title Like '%값%'
        db.collection('chef').find({}).skip(skip).limit(rowSize).toArray((err,docs)=>{ //데이터가 배열이 아닌 낱개로 들어가서 이렇게 해줌
            //요청한 사용자에게 값 보내기
            response.json(docs);
            console.log(docs);
            client.close();
        })

    });

})

app.get('/chef_total',(request,response)=>{
    var url="mongodb://211.238.142.181:27017"; //몽고디비 주소
    Client.connect(url,(err,client)=>{
        var db = client.db('mydb');
        db.collection('chef').find({}).count((err,count)=>{
            response.json({total:Math.ceil(count/50.0)})
            client.close();
            return count;
        })
    })
})

서버를 다시 올려야 적용이 된다. 

 

2. 이 부분을 채워야 한다. Chef.js로 이동한다. 

 

 

3. const로 배열 받는 것과 페이지, 총 갯수 받는 것을 만들고 useEffect를 이용해서 값을 보내준다.

 const [chef,setChef] = useState([]);
    const[page,setPage]= useState(1);
    const [total,setTotal] = useState(0);

    useEffect(()=>{
        axios.get('http://localhost:3355/chef',{
            params:{
               page : page
            }
        }).then((result)=>{ //배열 값이 result에 저장된 상태
            setChef(result.data);
        })
    },[])

    useEffect(()=>{
        axios.get('http://localhost:3355/chef_total').then((result)=>{
            setTotal(result.data.total)
        })
    },[])

4. chef 데이터를 구성한다. 

const html = chef.map((m)=>
        <table className={"table"}>
            <tr>
                <td className={"text-center"} width={"30%"} rowSpan={"2"}>
                    <img src={m.poster} width={"100"} height={"100"} className={"img-circle"}/>
                </td>
                <td width={"70%"} colSpan={"4"}>{m.chef}</td>
            </tr>
            <tr>
                <td className={"text-center"}><img src={"/1.png"}/></td>
                <td className={"text-center"}><img src={"/3.png"}/></td>
                <td className={"text-center"}><img src={"/7.png"}/></td>
                <td className={"text-center"}><img src={"/2.png"}/></td>
            </tr>
            <tr>
                <td className={"text-center"}>{m.mem_cont1}</td>
                <td className={"text-center"}>{m.mem_cont3}</td>
                <td className={"text-center"}>{m.mem_cont7}</td>
                <td className={"text-center"}>{m.mem_cont2}</td>
            </tr>
        </table>
    )

5. return부분에 html를 적용시켜주고 버튼을 만든다.

 return(
        <React.Fragment>
            <div className={"row"} style={{"margin":"0px auto", "width":"700px"}}>
                <table className={"table"}>
                    <tbody>
                        <tr>
                            <td>
                                {html}
                             </td>
                        </tr>
                    </tbody>
                    <div className={"row"}>
                          <button className={"btn btn-lg btn-primary"} onClick={onPrev}>이전</button>
                           {page} page/{total} pages
                           <button className={"btn btn-lg btn-danger"} onClick={onNext}>다음</button>
                    </div>
                </table>
            </div>
        </React.Fragment>
    )

6. 버튼기능을 하는 const onPrev와 const onNext을 만든다.

const onPrev=()=>{
        setPage(page>1?page-1:page)
        axios.get('http://localhost:3355/chef',{
            params:{
                page:page //http:localhost:3355/recipe?page=1 과 동일한 형태
            }}).then((result)=>{ //배열 값이 result에 저장된 상태
            setChef(result.data);
        })
    }

    const onNext=()=>{
        setPage(page<total?page+1:page)
        axios.get('http://localhost:3355/chef',{
            params:{
                page:page //http:localhost:3355/recipe?page=1 과 동일한 형태
            }}).then((result)=>{ //배열 값이 result에 저장된 상태
            setChef(result.data);
        })
    }