리액트 _7_mongodb 연결한 것 출력하기

* function 기반일 때 state를 쓸 수 있게 하는 것 *
      1. useState
      2. useEffect => componentDidMount()

 

* state 변수: 외부에서 데이터를 읽어올 때 사용 ==> useState()로 변경가능

* 생성자 constructor => state 설정, 이벤트 등록 시 사용

 

1. App.js 를 작성한다.

import React,{Component} from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component{
  //생성자 constructor => state 설정, 이벤트 등록 시 사용
  constructor(props) {
    super(props);
    //state  설정
    this.state={
      movie:[] //배열로 받기
    }
  }
  //화면 출력 전에 서버에서 데이터를 읽어서 state에 저장
  componentDidMount() {
  }
  //화면에 출력
  render() {
    return (
        <div></div>
    );
  }
}

export default App;

순서는 생성자생성(constructor)-> 서버에 있는 값 가져와서 생성자에 저장(componentDidMount)->화면출력(render)

 

* constructor 없이 state를 적고 싶다면 componentDidMount위에 state={}로 전역변수로 작성해 줄 수 있다.

=> 하지만 우리는 이벤트 처리를 해야 함으로 constructor 를 사용한다. 

 

2. 여기서 라이브러리 하나만 가져오자

https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_img_thumbnail2&stacked=h

Tryit Editor v3.6

css를 복사한다.

index.html에다가 css를 넣어준다. (항상 css는 여기다가 넣는다!)

div에 class="container" 도 준다. 

3. row안에 형태도 복사해온다. 

4. App.js로 와서 axios를 import해주어야 서버데이터를 읽어올 수 있다.

import axios from 'axios'

5. componentDidMount에 axios를 불러온다.

  * setState는 render()를 다시 호출해서 데이터를 다시 출력 (수정하는 역할: UPDATE)

    componentDidMount는 render 다음에 실행되는 것이기 때문

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

6. render 안에 화면 모양을 만들어본다.

  render() {
    const  html=this.state.movie.map((m)=>
        <div className="col-md-4">
          <div className="thumbnail">
            <a href="/w3images/lights.jpg">
 		<img src={m.poster} alt="Lights" style={{"width":"100%"}}/>
                <div className="caption">
                  <p>{m.title}</p>
                </div>
            </a>
          </div>
        </div>
    )
    return (
        <div className={"row"}>
          <h1 className={"text-center"}>현재 상영영화</h1>
          {html}
        </div>
    )
  }
}

결과)

새로 terminal을 하나 추가하고 거기서 npm start를 치면 된다. 

+ App.js 전체 코드

import React,{Component} from 'react';
import logo from './logo.svg';
import './App.css';
import axios from 'axios'

class App extends Component{
  //생성자 constructor => state 설정, 이벤트 등록 시 사용
  constructor(props) {
    super(props);
    //state  설정
    this.state={
      movie:[] //배열로 받기
    }
  }
  //화면 출력 전에 서버에서 데이터를 읽어서 state에 저장
  componentDidMount() {
      axios.get('http://localhost:3355/movie').then((result)=>{
      this.setState({movie:result.data})
      })
  }
  //화면에 출력
  render() {
    const  html=this.state.movie.map((m)=>
        <div className="col-md-4">
          <div className="thumbnail">
            <a href="/w3images/lights.jpg">
              <img src={m.poster} alt="Lights" style={{"width":"100%"}}/>
                <div className="caption">
                  <p>{m.title}</p>
                </div>
            </a>
          </div>
        </div>
    )
    return (
        <div className={"row"}>
          <h1 className={"text-center"}>현재 상영영화</h1>
          {html}
        </div>
    )
  }
}

export default App;