일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
- react
- TypeScript
- CSS
- pug
- ECMAScript
- Mongoose
- nodejs
- ES6
- express
- clonecoding
- NextJs
- JavaScript
- GRID
- HTML
- CLONE
- heroku
- Component
- graphQL
- 리액트
- Session
- form
- DART
- frontend
- MongoDB
- javscript
- backend
- Flutter
- node.js
- API
- 자바스크립트
- Today
- Total
목록Presenter (2)
Enjoy Programming

앞서 기본 파일들을 만들었고 이제 홈컨테이너를 작성한다. 컴포넌트가 마운트 되면 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상태가..

이제 할 일은 만들어 놓은 api들의 데이터를 화면에 뿌려줘야 한다. 이번에 접근 방식은 리액트 컴포넌트 코딩패턴인데... container presenter pattern이라고 불린다. 앞서 배운 class컴포넌트와 state방식은 작은 데이터의 경우 잘 되지만 data의 양이 많아지면 힘들다고 한다. 이 방식은 컨테이너는 데이터를 가지고, state를 갖고 api를 불러온다. 모든 로직을 처리후 프레젠터는 데이터들을 보여주는 역할을 한다. 프레젠터는 state도 없고 api에 대해 모르고 클래스도 없는 just function component이다. 프레젠터는 스타일이고 컨테이너는 data! 이제 모든 컨테이너와 프레젠터를 생성하자. 각 라우터에 맞게 먼저 Routes 폴더에 각 라우터명의 폴더를 생..