Enjoy Programming

[clone coding-devflix] container Presenter2 본문

JavaScript/React

[clone coding-devflix] container Presenter2

LEETAEEON 2021. 6. 13. 10:45

앞서 기본 파일들을 만들었고

이제 홈컨테이너를 작성한다. 컴포넌트가 마운트 되면 nowPlaying, upcoming, popualr를 찾고

그게 끝나면 state값을 설정해준다. 에러가 있으면 loading을 false로 변경하게된다.

 

try,catch,finally구문으로 finally에서는 error가 생기든 성공적으로 데이터를 받아오든 loading은 false로 바꿔준다.

그리고 catch에서는 error가 발생시 출력할 문구를 만들어줬고

try구문에서는 moviesApi를 import해주고 moviesApi에 nowplaying을 async await을 활용해 받아오고

콘솔창에 찍어주면 성공적으로 data가 온다.

async await을 안쓰면 언제나 그랬듯 promise pending상태가 된다.

 

받아온 데이터를 destructuring을 이용해 nowPlaying.data를 할필요없이 data를 받아주자

 

results만 받아왔다.. 그런데 state에서 세가지 prop이 모두 result값을 받아오므로

이름을 바꿔주자... 알아보기쉽게

그리고 setState로 값을 바꿔준다.

api state값 세개를 모두 받아오고~ render에서 console.log(this.state)해주면~

최종적으로 모두 20개씩 받아오고 loading은 false가 되었다~~~~

테스트로 error를 한번 발생시켜보자

정확하게 에러가 발생한다~! 오케이

 

아무튼 제대로 잘 작동한다. 이제 tv, detail, search 컨테이너 작업을 하자