[React JS] state 연습하기

일단 컴포넌트 외부에 있는 무비리스트를 state 안으로 옮겨보자.!

기존에 있는 

const movies를 state 안으로 옮길 것이다.

 

이 코드를 복사한 후 삭제한다.

그리고 이 코드를 state 안으로 넣어주며, 약간 코드를 수정을 한다. state 코드에 맞게

요런 형식으로 바꿔준다.

(이때 greeting : "Hello" , 콤마를 꼭 찍어줘라, 스크린샷은 안찍혀있다. 꼭 찍어줘야 한다. )

이렇게 바꾸면 아마 터미널에서 movies를 찾을 수 없다고  뜰것이다.

그러므로,

기존의 

  {movies.map((movie, index) => {

          return <Movie title={movie.title} poster={movie.poster} key={index} />

        })}

이 코드를 요렇게 바꿔준다.

  {this.state.movies.map((movie, index) => {

          return <Movie title={movie.title} poster={movie.poster} key={index} />

        })}

이전 시간에 배웠던 greeting은 다 삭제해준다.

우리는 여기 영화 리스트에서 영화를 한개 더 추가하고 싶을 때 어떻게 해야하는지 알아보자

일단 did mount 밑에 time out을 작성할 것이다.

timeout이 뭐냐면 00시간 후에 00 작업을 수행시킨다는 뜻이다.

fn(function), 0000초 라고 작성하면 0000초 후에 페이지가 로드하고 00 작업이 시작하는 것이다.

자! 여기서 위에 처럼 작성해도 되지만,

아래 스크린 샷처럼 작성해도 된다.

아래것이 최신 자바스크립트이다.

자 이제 본격적으로 영화리스트에서 영화를 추가해보자

자세히 살펴보면,

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

여기서 ...this.state.movies를 삭제한다면, 어떻게 될까??

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

하나만 추가한 것이 아니라, 전화 영화 리스트를 대체해버린거다.

...this.state.movies 이 코드의 뜻은

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

이와 같이 state를 활용,응용해서 다양한 효과를 볼 수 있다.

예를 들면, 페이지 로딩할때 스크롤을 아래로 내릴 수 록 더 많은 영화가 로딩되는 효과와 같은,

infinite scroll 이라고 한다.

동일한 효과를 볼수있다. 20개 영화가 더 추가 로딩되는 것이다.

끝까지 스크롤하면 20개의 영화가 추가된다.

페이스북과 인스타그램이 동일한 것을 사용한다..

만약 ...this.state.movies를 추가하는 다음 코드에 넣게 된다면 어떻게 될까?

새로 추가한 영화가 상단으로 먼저 출력된 후에, 나머지 기존에 있는 것들이 출력이 된다

*본 포스팅은 노마드코더 동영상강의를 보고 공부한 내용을 정리한 것 입니다.