[React] 1일차

Spring: ReactController에서 주소 지정하는 부분

index.html에서 css 링크를 바꿨다.

axios를 추가했다. 외부데이터를 불러오는 역할이라고 함.

 

▶app.js에 코딩한 내용

import React,{Component} from 'react'
import axios from 'axios'
 
class App extends Component{
  constructor(props) {
    super(props);
    this.state={
      recipe:[],
      detail:{},
      totalpage:1,
      page:1
    }
  }
  componentDidMount() {
    axios("http://localhost/web/recipe/list.do",{
      params:{
        page:1
      }
    }).then(response=>{
      this.setState({recipe:response.data})
    })
  }
  render() {
    const html=this.state.recipe.map(m=>
        <div className="col-md-3">
          <div className="thumbnail">
              <img src={m.poster} alt="Lights" style={{"width":"100%"}}/>
                <div className="caption">
                  <p>{m.title}</p>
                </div>
          </div>
        </div>
    )
    return(
        <div className={"row"}>
          {html}
        </div>
    )
  }
}
export default App;

결과화면. 한글 인코딩이 아직 안되는 것 같아서 수정할 예정.