리액트 _19_Router_HOOK_영화뉴스 인기순위 리스트 만들기

저번에 만들었던 movie 서버를 이용해서 영화 페이지를 만들어보자.

movie-server.js

0.00MB

 

 

1. 서버와 관련된 것들을 import한다. package.json에

   "express": "^4.17.1",
   "mongodb": "^3.5.7",
    "request": "^2.88.2",
    "path": "^0.12.7"

     "xml2js": "^0.4.23"

 

2. "react-router-dom": "^5.2.0",
"react-router": "^5.2.0" 얘네 둘도 넣는다.

3. movie-server에다가 몽고db 접속할 수 있는 기능을 만든다.

app.get('/movie_news',(request,response)=>{
    var url="mongodb://211.238.142.181:27017"
    Client.connect(url,(err,client)=>{
        var db = client.db("mydb");
        db.collection("news").find({}).toArray(function (err,docs) {
            response.json(docs)
            client.close();
        })
    })
})

app.get("/movie_pop",(request,response)=>{
    var url="mongodb://211.238.142.181:27017"
    Client.connect(url,(err,client)=>{
        var db = client.db("mydb");
        db.collection("news_pop").find({}).toArray(function (err,docs) {
            response.json(docs)
            client.close();
        })
    })
})

 

4. App4를 만들고 useState, useEffect를이용해서 값을 받아준다.

    const [news,setNews]= useState([]);
    const [pop,setPop]= useState([]);

    useEffect(()=>{
        axios.get('http://localhost:3355/movie_news').then((res)=>{
            setNews(res.data);
        } )
    },[])

    useEffect(()=>{
        axios.get('http://localhost:3355/movie_pop').then((res)=>{
            setPop(res.data);
        } )
    },[])

5. return 안에는 출력되는 것 모양을 잡는다. 

   return(
        <div className={"row"}>
            <div className={"col-sm-8"}>

            </div>
            <div className={"col-sm-4"}>

            </div>
        </div>
    )

6. movie_news 부분 값 받아온 것을 어떻게 뿌릴지 구성한다.

 const movie_news=news.map((m)=>
            <table className={"table"}>
                <tbody>
                    <tr>
                        <td width={"30%"} className={"text-center"} rowSpan={"3"}>
                            <img src={m.poster.substring(0,m.poster.lastIndexOf(")"))} width={"100%"}/>
                        </td>
                        <td width={"70%"}>
                            <a href={m.link}><b>{m.title}</b></a>
                        </td>
                    </tr>
                    <tr>
                        <td width={"70%"}>{m.content}</td>
                    </tr>
                    <tr>
                        <td width={"70%"} className={"text-right"}>{m.author}</td>
                    </tr>
                </tbody>
            </table>
    )

7. return안에 실행시켜준다.

return(
        <div className={"row"}>
            <div className={"col-sm-8"}>
                <table className={"table"}>
                    <tbody>
                        <tr>
                            <td>
                                {movie_news}
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div className={"col-sm-4"}>

            </div>
        </div>

 결과)

이미지와 글이 출력되어있다.

8. 이제 옆에 인기순위 창을 만들어보자

const movie_pop = pop.map((m)=>
        <tr>
            <td> <img src={m.poster.substring(0,m.poster.indexOf(")"))} width={"30"} height={"30"}/></td>
            <td>{m.title}</td>
        </tr>
    )

 

9. return 안에 실행한다.

return(
        <div className={"row"}>
            <div className={"col-sm-8"}>
                <table className={"table"}>
                    <tbody>
                        <tr>
                            <td>
                                {movie_news}
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div className={"col-sm-4"}>
                <table className={"table"}>
                    <tbody>
                        <tr>
                            <td>
                                {movie_pop}
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    )

};

결과) 오른쪽에 인기순위처럼 생긴 것을 알 수 있다.