[Front end] React #8 웹 서비스 만들기 Practicing this setState

이번 포스팅은 state를 좀 더 연습하는 시간이다. 컴포넌트 외부에 있는 영화 리스트를 state 안으로 옮겨보자.

영화 리스트를 state 안으로 옮기면 위와 같은 컴파일 에러가 나타난다. 'movies'는 정의되지 않았다는 메시지이다. greeting과 마찬가지로 this.state로 접근하면 된다.

이번에는 componentDidMount() 함수를 이용하여 render가 완료된 후 1초 뒤에 새로운 영화 리스트를 추가해보자. 여기서 ...this.state.movies를 삭제하고 실행하면 모든 영화가 사라지고 새롭게 추가한 영화만 남게 된다. 하나만 추가된것이 아니라 전체 영화 리스트를 대체해 버리게 된다. 이와 같이 state를 활용, 응용해서 다양한 효과를 줄 수 있다.