리액트 _2_비동기방식으로 페이지 넘기기

2020/05/30 - [react] - 리액트 _1_만개의레시피 리액트버전

리액트 _1_만개의레시피 리액트버전

이 포스팅 이어서 작성하겠습니다.

 

페이징작업을 해보자

 

1. recipe.js에 이전과 다음버튼을 추가해줍니다.

  return(
            <React.Fragment>
                    <div className={"row"}>
                            {html}
                    </div>
                    <div className={"row"}>
                            <button className={"btn btn-lg btn-primary"}>이전</button>
                            <button className={"btn btn-lg btn-danger"}>다음</button>
                    </div>
            </React.Fragment>

2. recipe-server에다가 몽고디비를 연결하고 데이터 총count값을 넘겨주는 것을 만든다. 

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

** count()함수는 꼭 return값이 있어야 한다.

   json을 받아서 total안에 넣어둔 것이다.

 

3. Recipe.js로 돌아와서 total값을 받는 변수를 생성해준다.

   const [total,setTotal] = useState(0);

useEffect를 이용해서 데이터를 받는다.

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

비동기화를 줄 땐 함수이름 앞에 async를 붙이고 값 가져올 떄 await를 붙이면 된다.

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

서버를 다시 올리고 실행하면 이렇게 totalpage가 나와있는 것을 알 수 있다. 

4. 버튼에 이벤트를 넣어보자.

onPrev와 onNext 변수를 만들어준다.

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

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

5. 버튼에 온클릭 이벤트를 준다.

<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>

결과) 화면이 바뀌는 것을 알 수 있다.