ReactJS - this.setState() 연습 | NomadCoders | 프로그래밍 공부

* 이 포스팅은 Nomad Coders의 강의를 들으며 내용을 정리한 것이며, 

모든 내용은 https://academy.nomadcoders.co/ 에서 보실 수 있습니다.*

이번 포스팅에서는 컴포넌트 외부에 있는 무비 리스트를 state 안으로 옮겨보자.

컴포턴트 외부에 있는 무비 리스트를 삭제하고, state 안에 붙여넣는다.

그러면, 에러메시지; 'movie'는 정의되지 않았다고 뜬다.

왜냐면 컴포넌트가 movies를 더이상 찾을 수 없기 때문이다.

그래서 movies 앞에 this.state. 를 붙여주자.

저장, 새로고침을 하면 이전과 동일.

이전 시간 작업한 greeting을 삭제하고,

이제 기존 영화 리스트에서 한 개의 영화를 더 추가하는 작업을 하자.

componentDidMount() 밑에 timeout을 작성한다.

setTimeout은 00시간 후에 00작업을 수행시킨다는 뜻이다.

function(), 000초 라고 작성하면 000초 후에 페이지가 로드되고 00작업이 시작된다.

일단 콘솔로그로 확인해보자.

이렇게 코드를 작성하면...

5초 후에 hello가 콘솔창에 뜬다.

방금건 old 자바 스크립트인데,

실제로는 function을 다 작성할 필요가 없다.

=> 로 작성해도 동일하게 작동할 것이다.

자 이제, 영화를 리스트에 추가해보자.

this.setState() 안에 영화를 추가하고 싶다고 써야한다. 어떻게 하느냐

movies:[] 안에

...

를 작성하고, this.state.movies,

{title:

poster:

}

컴포넌트가 mount하면, 페이지 로드 후 1초 후에, 00작업 (새로운 영화)이 보여질 것이다.

transporting 등장...

...this.state.movies는 array에 영화를 추가한다.

만약 위 코드를 지우면,

1초 후에 모든 영화가 사라지고 추가된 영화만 남게된다.

다음과 같이.

즉 하나의 영화를 추가한 것이 아니라, 전체 영화리스트를 대체해버리게 된 것이다.

즉 해당 코드가 말하는 것은,

이전 영화 리스트를 그대로 두고, 한 개의 영화를 '추가'하라는 뜻이다.

만약 this.state.movies를 새로 추가하는 영화 다음에 입력하게 되면?

새로 추가하는 영화가 맨 윗 목록에 뜨고, 이후에 기존 영화가 뜨게 된다.

즉 이 코드를 이용해 다양한 응용이 가능.