[React] 영화목록 읽어와서 출력하기(json)

대충 reference guide도 다 읽었겠다 호기롭게 실전코딩을 해보기로했다.

무엇을 해볼까~ 서칭을 좀 하다보니 어떤분이 영화목록을 json으로 읽어와서 포스터와 rating을 아주 예쁘게 시각화 해놓은 예제가 있길래 따라해보기로 했다.

(ref : kyungsnim.net/24?category=883416)

 

 

역시나 생각과는 달리 엄~청나게 해매고있는 중이다. 위의 스크린샷처럼 산더미같이 쌓여만 가는 주석코드들..

그래도 언제나 그렇듯 새로운걸 배우는 일은 너무 즐겁다. 오랫만에 느끼는 이 행복 크핳핳.

 

 

내 실력이 부족해서인지,,, 이해력이 부족해서인지,,, 완벽하게 따라하진 않았고 이것 저것 바꿔가면서 코드를 짜보았다.

 

대충 클래스도 생성해보고, constructor도 만들어보고~ state에 변수(변수라고 하는게 맞나?)도 할당해보고 ~.~

처음에는 영화목록을 비동기로 읽는 코드를 app.js에 다 구현했는데, 다른 인터넷 글들을 보니 아주 깔끔하게 js파일을 분리하는 코드들이 있었다. 그래서 나도 호기롭게 파일을 분리했다.

 

movies 관련 파일인데 이름이 Device.js 무엇 ㅋㅋ 예제를 보면서 만들다보니 코드가 완전 뒤죽박죽~ 뭐 어떠리~ 나는 웹 초보쓰~~

 

비동기 코드도 작성해보았다. 저런 형태로 함수를 선언하는게 react 가이드에 있었던 걸로 기억한다. 가이드에는 실험적인 형태의 함수호출이라고 주석이 달려있었는데 인터넷에 찾아보면 저런식으로 구성해놓은 코드가 많더라는ㅋ

 

처음에는 await을 통한 async code를 구성했는데도 불구하고 async 작업이 끝나기 전에 Device class의 state.data[] 를 upsetData 하려고 했더니 PromissData 라고 뜨면서 data가 null 이라고 뜨는 오류를 맞이했다. 구글링을 해보니 비동기상태에서 아직 작업이 끝나기 전에 data를 이용하려해서 null이 뜬거였다. 이 때 비동기 동작에대한 ES6+의 Promiss라는 방식을 통한 콜백같은(다중콜백을 피하려고 등장한 개념이라고 하던데..일단 동작이 비슷하므로 '콜백같은'이라고 표현하겠다..) 처리를 한다고한다. 오호.. 나중에 시간이 되면 이 내용도 조금 자세히 찾아보아야겠다.

 

이렇게 react lifecycle도 사용해보았다. 하하 재밌다.. didMount시점에 json을 axios로 읽은 후 업데이트를 수행하도록 했따. 

 분명히 가이드에서 react의 생명주기에 관해 공부를 했지만 역시나 머리가 리셋되었나보다:> 금방 까먹고 getMyData함수를 rendor에 넣어버렸더니 짧은 텀으로 계속 axios를 실행하더라는 하핫..(아마도 랜더링이 계속 되면서 요청을 한 듯 함)

 

 

https://github.com/ManSung-Kim/movie-app

 

후하하 여차저차 고생해서 위의 스크린샷과 같이 첫 React 결과물을 만들었다. 웹프론트 개발자 분들에게는 매우 쉽게 보일 수 있지만, 내눈에는 너무 소중한 코드가 또 하나 완성되었다.

또 무엇을 만들어볼지 너무 설랜다. 근데 지금 벌써 새벽 1시라 너무 졸리다. 일단 여기까지 하고 자야겠다!

 

시작은 언제나 이렇듯 가볍게:>

 

 

 

-------------

기타. async 동작을 위한 axios 설치