React.영화App만들기(axio);

gandalfzzing·2020년 2월 13일
0

React

목록 보기
7/20

저번에 만들던 고객관리시스템 만들기를 잠시 중단하고 이번에 NomaderCoder의 React 강좌인 Movie App 만들기를 하겠습니다. 먼저 API의 JSON을 받아오기 위해 Axio라는 패키지를 깔아야 합니다.

npm i axio라고 치면 깔립니다.

먼저 Web에 접속하면 API를 다 불러오기전에 Loading... 이라는 화면을 출력하고자 합니다. 또, Loading이 끝나면 API에서 받아오는 JSON을 화면에 뿌려줘야 합니다.

그렇기 때문에 다음과 같이 코드를 작성합니다.

먼저는 삼항연산자로 True일 경우 Loading이라는 Div-Span 엘리멘트가 랜더되고, False이 되었을 경우 Movie Data를 Map으로 순환하여 뿌려주게 됩니다. 그리고 만들어낼 Movie라는 컴포넌트에 전달한 JSON 내부에 있는 필요항목의 Data들을 Props로 전달하하는 구조입니다.

여기서 영화API는 한 토렌트 불법사이트의 API인데, 노마더코더 강사인 니콜라스가 데이터를 자기가 깃헙에 올려 다시 재배포하여 영화정보만 보내주는 API입니다.

이제 API를 axio를 통해 받아오고 isLoading을 False로 바꾸어 Map이 작동하도록 하겠습니다.

getMovies라는 함수에 async , wait을 써서 해당 API가 다 불러와졌을 경우까지 기다렸다가 작동시키게 합니다. API가 무겁기 떄문에 비동기적으로 한번에 받아 넣어야 우리가 원하는 구동방향이 나타납니다. 또 Async , wait를 쓰면 promise보다 더 이쁘고 쉬운 코드 작성이 가능합니다.

JOSN API에서는 Data라는 객체에 Data가 있고 거기에 Moives 라는 객체 안에 위에서 props로 전달해준 Id, Year, title etc.. 요소들이 존재합니다. 그렇기 때문에 저렇게 가져와고 aixo.get 메서드를 사용하여 해당 API를 불러와서 전달받에 합니다. 그 뒤에 componentDidMount로 Render가 끝난 뒤 getMovie 함수를 실행하게 해주면 처음에 true 상태인 isLoaidng으로 인해 Loading... 이라는 글자가 뜨고 랜더가 마친 후 API를 다 가져온 getMovie함수가 준비완료 신호를 보내면 DidMount로 인하여 작동하하여 isLoading을 false시키고 movies state에 API에 존재하는 Data.Data.moives를 넣어 전달해줍니다.

그럼 state가 변화하였기 때문에 다시 Reander가 되고 false이 되었기 때문에 movie의 Data를 map으로 뿌려주게 됩니다.

그럼 이젠 Movie 컴포넌트를 작성해보겠습니다.

만약 상태변화가 되는 state를 쓰는 것이 아니라면 class보다는 func이 보다 작성하기도 쉽고 쓰는게 낫다고 합니다. APP에서 전달해준 props를 각 엘리먼트에 맞게 연결시켜주고 원하는 HTML로 꾸며주면 끝!

<실행화면>

Loading

on getMovie Fnc

0개의 댓글