* 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
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;
'react' 카테고리의 다른 글
리액트 _9_외부서버 이용한 페이지 만들기2 (0) | 2020.05.16 |
---|---|
리액트 _8_request 이용해서 외부서버 불러오기(mongodb아님) (0) | 2020.05.16 |
리액트 _6_mongodb연결하기 (0) | 2020.05.16 |
리액트 _5_function (0) | 2020.05.09 |
리액트 _5_외부파일 불러와서 출력하기 (0) | 2020.05.09 |