리액트 _9_외부서버 이용한 페이지 만들기2

1. App2.js 파일을 만든다

2. index.js에서도 App2로 수정해준다

   (import 부분이랑 <React.StrictMode> 안에)

3. axios를 import한다

import axios from 'axios'

4. 일단 화면만 만들어보자

예시 화면

일단 아래에 버튼처럼 버튼을 만든다.

render() {
        return(
            <React.Fragment>
                <div className="row" style={{"margin":"0px auto","width":"960px"}}>
                    <button className={"btn btn-sm btn-primary"}>박스오피스</button>
                    <button className={"btn btn-sm btn-danger"}>실시간 예매율</button>
                    <button className={"btn btn-sm btn-success"}>좌석 점유율</button>
                    <button className={"btn btn-sm btn-info"}>온라인 이용순위</button>
                </div>
                <div className="row" style={{"margin":"0px auto","width":"960px"}}>
                    <div className={"col-sm-6"}>

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

                    </div>
                </div>
            </React.Fragment>
        )
    }
    

버튼을 누를 때마다 아래 div 화면이 다르게 나오게 해야한다. 

 

5. constructor에 state를 이용해서 배열들을 받아서 출력하게 한다. 

constructor(props) {
        super(props);
        this.state={
            movie:[],
            detail:{}
        }
    }
   

6. componentDidMount를 이용해서 데이터를 읽어와서 뿌려주는 작업을 해본다.

    componentDidMount() {
        axios.get('http://localhost:3355/movie_home',{
            params:{
                no:1
            }
        }).then((result)=>{
            this.setState({movie:result.data})
        })
    }

7. 아래 그림처럼 오른쪽에 있는 모양대로 리턴안에 div를 만들어본다. 

    render() {
        const  html=this.state.movie.map((m)=>
            <tr>
                <td><img src={m.thumbUrl} width={"35"} height={"35"}/></td>
                <td>{m.movieNm}</td>
                <td>{m.director}</td>
                <td>{m.genre}</td>
            </tr>
         )
        return(
            <React.Fragment>
                <div className="row" style={{"margin":"0px auto","width":"960px"}}>
                    <button className={"btn btn-sm btn-primary"}>박스오피스</button>
                    <button className={"btn btn-sm btn-danger"}>실시간 예매율</button>
                    <button className={"btn btn-sm btn-success"}>좌석 점유율</button>
                    <button className={"btn btn-sm btn-info"}>온라인 이용순위</button>
                </div>
                <div className="row" style={{"margin":"0px auto","width":"960px"}}>
                    <div className={"col-sm-6"}>
                        <table className={"table"}>
                            <thead>
                                <tr>
                                    <th className={"text-center"}></th>
                                    <th className={"text-center"}>영화명</th>
                                    <th className={"text-center"}>감독</th>
                                    <th className={"text-center"}>장르</th>
                                </tr>
                            </thead>
                            <tbody>
                                  {html}
                            </tbody>
                        </table>
                    </div>
                    <div className={"col-sm-6"}>
                    </div>
                </div>
            </React.Fragment>
        )
    }
}

8. 이대로 실행했을 때 값이 안나올 수 있다. 

왜냐면 json parse를 안해줘서..!

movie-server에서 JSON.parse(json)을 해주면 값이 넘어간다. 

 

결과)

사진이 안나오는 이유는 넘어오는 값에 서버가 붙여져있지 않기 때문이다.

 <td><img src={"http://www.kobis.or.kr/"+m.thumbUrl} width={"35"} height={"35"}/></td>

 

이렇게 앞에 서버를 붙여넣어주면 이미지가 나온다.

 

9. 버튼과 연결하여 이벤트 효과를 주자.

componentDidMount에 있는 것을 복사해서 onMovie(no)를 만들어준다.

    onMovie(no){
        axios.get('http://localhost:3355/movie_home',{
            params:{
                no:no
            }
        }).then((result)=>{
            this.setState({movie:result.data})
        })
    }

10. 버튼에 onClick기능을 준다

<button className={"btn btn-sm btn-primary"} onClick={this.onMovie.bind(this,1)}>박스오피스</button>
<button className={"btn btn-sm btn-danger"} onClick={this.onMovie.bind(this,2)}>실시간 예매율</button>
<button className={"btn btn-sm btn-success"} onClick={this.onMovie.bind(this,3)}>좌석 점유율</button>
<button className={"btn btn-sm btn-info"} onClick={this.onMovie.bind(this,4)}>온라인 이용순위</button>

버튼누를때마다 다른 것들이 나오는 것을 알 수 있다.