이번 시간에는 state를 조금 더 연습해 보겠습니다.
컴포넌트 외부에 있는 무비 리스트를 state 안으로 옮겨보겠습니다.
class App extends Component {
//Render : componentWillMount() -> render() -> componentDidMount()
//Update : componentWillReceiveProps() -> shouldComponentUpdate() -> componentwillUpdate() -> render() -> componentDidUpdate
state = {
greeting: 'Hello React왕초보',
movies : [
{
title : "Matrix",
poster : "http://ksassets.timeincuk.net/wp/uploads/sites/55/2017/03/matrix_reboot_1000-630x400-1.jpg"
},
{
title : "Full Metal Jacket",
},
{
title : "Oldboy",
},
{
title : "Star Wars",
}
]
}
위와 같이 수정하자 아래와 같이 movies가 정의되지 않았다는 에러가 발생하였습니다.
Failed to compile.
./src/App.js
Line 45: 'movies' is not defined no-undef
Search for the keywords to learn more about each error.
app.js 의 아래 render 부분을 아래와 같이 수정하여주니 에러가 발생하지 않습니다.
render() {
return (
<div className="App">
{this.state.movies.map((movie, index) => {
return (
<Movie title={movie.title} poster={movie.poster} key={index} />
);
})}
</div>
);
}
}
여기에 영화 리스트에서 영화를 한 개 더 추가하고 싶을 때는 어떻게 해야 할까요?
일단 아래와 같이 comoponetDidMount 부분을 추가해봅시다.
componentDidMount(){
setTimeout(function(){
console.log('hello react 왕초보')
}, 1000)
}
1초 후에 console에서 아래와 같이 출력되는 것을 확인하실 수 있습니다.
이렇게 00초 후에 페이지 로드 후 , 어떤 작업을 수행시킬 수 있습니다.
하지만 위에 작성한 것은 예전 자바스크립트 문법입니다. function을 다 작성하지 않아도 됩니다.
아래와 같이 최신 자바스크립트 문법으로 가능합니다.
componentDidMount(){
setTimeout(() => {
console.log('hello react 왕초보')
}, 1000)
}
이제 진짜 영화 리스트를 추가해 보겠습니다.
componentDidMount(){
setTimeout(() => {
this.setState({
movies: [
...this.state.movies,
{
title: "신과함께",
}
]
});
}, 1000)
}
영화 제목 "신과함께" 을 추가해주었습니다. 아래와 같이 잘 출력되었습니다.
위에 코딩한 내용을 자세히 살펴보겠습니다.
컴포넌트가 mount하면 페이지 로드 후 1초 후에 새로운영화가 보여지게 되는 것입니다.
영화리스트에 영화를 추가하는 것입니다. 그런데 아래와 같이 해당코드를 삭제하게 되면
1초 후에 모든 영화가 사라지고 방금 추가한 영화만 남게 됩니다.
...this.state.movies, 이 부분은 "이전 영화 리스트를 그대로 두고,
그리고 한 개 영화를 추가"하라는 뜻입니다.
이와 같이 state를 활용해서 응용을 하면 다양한 효과를 볼 수 있습니다.
예를 들면, 페이지를 로딩할 때 스크롤을 아래로 내릴수록
더 많은 영화가 로딩되는 효과(infinite scroll)도 구현할 수 있습니다.
끝까지 스크롤하면 영화를 추가로 로딩해주는 것입니다. 페이스북에서도 이런 방식을 사용하고 있습니다.
인스타그램도 동일합니다.
그럼 이제 아까 작성한 스크립트를 약간 변경해보겠습니다.
this.state.movies 부분 위치를 변경해보겠습니다. 시간도 5초로 변경하였습니다.
어떻게 될까요?
componentDidMount(){
setTimeout(() => {
this.setState({
movies: [
{
title: "신과함께",
},
...this.state.movies
]
});
}, 5000)
}
위에 캡쳐한 그대로 "신과함께"가 제일 위로 변경된 것을 확인하실 수 있습니다.
오늘은 여기까지 하도록 하겠습니다. 고맙습니다.
'React > 왕초보 도전' 카테고리의 다른 글
| 15. 간단한 영화 웹 서비스 만들기 10 (0) | 2018.01.19 |
|---|---|
| 14. 간단한 영화 웹 서비스 만들기 9 (0) | 2018.01.16 |
| 12. 간단한 영화 웹 서비스 만들기 7 (0) | 2018.01.05 |
| 11. 간단한 영화 웹 서비스 만들기 6 (0) | 2018.01.01 |
| 10. 간단한 영화 웹 서비스 만들기 5 (0) | 2017.12.29 |