SW과정 REACT 10일차 0908

SW과정 REACT 10일차 0908

1. Spring에서 react 코드

$(document).ready(function(){
   
   setTimeout(()=>{
      $("#testDiv").text("We are ready");
   },6000);
   });
   

2. Movie.json API

3. Movie list 기본코드

import React from "react";
import axios from "axios";
import Movie2 from "./Movie2";

class App4 extends React.Component{
    state={
        isLoading: true,
        movies:[],
    }

    getMovie=async ()=>{
        const resultData=await axios.get('https://yts-proxy.now.sh/list_movies.json?sort_by=rating');
        console.log(resultData.data.data.movies);
        this.setState({isLoading:false, movies:resultData.data.data.movies});
    };

    componentDidMount(){
        this.getMovie();
    }

    render(){
        return (
            
        <div>
            {this.state.isLoading? 'loading...' : (   
                <table border="1"><tbody>
                    {this.state.movies.map((item,index)=>{
                        return <Movie2 key={index} title={item.title}
                        medium_cover_image={item.medium_cover_image} /> })}
                    </tbody>
                </table> 
            )  }
        </div>

        );
    }
}

export default App4;

4. JSON 형식으로 변경

@GetMapping("/boardList2")
	@ResponseBody
	public String boardList2() {
		List<Board> list=boardService.boardList();
		JSONArray arr=new JSONArray();
		for(Board b:list) {
			JSONObject o=new JSONObject();
			o.put("articleNo", b.getArticleNO());
			o.put("title",b.getTitle());
			o.put("content",b.getContent());
			o.put("id",b.getId());
			arr.add(o);
		}
		System.out.println(arr);
		return arr.toJSONString();
	}

좋은 웹페이지 즐겨찾기