Containers

Container Presenter Pattern

container-presenter 패턴

• 데이터처리와 데이터출력을 분리하는 패턴
• Container에서는 API Request, Exception Error, redux, dispatch...
• Presenter에서는 Props, UI...를 관리하는 것이다.
• Container에서 처리하거나 받아온 데이터들을 Presenter 컴포넌트에 Props로 넘긴다.
  - Presenter에서는 받아온 데이터에 따라 엘리먼트를 출력, UI관련된 작업만 처리한다.

✔ 장점

• 데이터처리 부분과 보여지는 부분이 나뉘어져있어서 코드를 작성할때 각자의 파일에서 코드를 작성하면된다.
• 가독성

Component Container

async await

자바스크립트는 api의 데이터를 받아올때까지 기다려주지 않고 바로 다음 로직을 실행함.

await문을 추가하면 데이터올때까지 기다려준 뒤 그 다음 코드 진행하도록 할 수 있다.

만약 await문이 없다면?
Promise {<pending>} 비동기처리가 완료되지 않은 상태가출력

비구조화할당

• 객체안의 객체를 비구조화방법으로 가져오는 방법

const { data :{ results } } = ...

• 비구조화할당 문법에서 변수명 지정하는 방법

const { data :{ results :nowPlaying } } = ...

Detail Container

route정보 가져오기

• match
  - params : { id : number }

  	> key 값 ( id )은 임의로 설정할 수 있음

• history : push
  - 라우터 이동

NaN값인지 확인할때는 if (value === NaN) 이 아니라
if (isNaN(value))

출처

• 초보를 위한 React JS