React.영화App만들기(CSS, slice);

gandalfzzing·2020년 2월 13일
0

React

목록 보기
8/20

먼저 시작전에 장르 data를 API에서 추가하도록 하겠습니다. 저번 글에서처럼 JSON안에서 해당 Data이름을 적어주면 됩니다.

각각 App.js 와 Movie.js에 해당의 내역을 추가해줍니다. ul에 map으로 li를 생성하여 뿌려주었습니다. 그 뒤 App.css로 해당 HTML등을 꾸며줍니다. CSS는 현재 리액트 공부하는 것에 특별하지 않으므로 해당 강좌의 css를 그대로 가져왔습니다.

<css로 꾸며진 화면>

그런데 각 화면들이 일정하게 놓여있지 않고, 글자들도 많습니다. 이럴때에는 slice 함수로 쉽게 합니다. slice함수는 이름 그대로 슬라이스 치듯이 원하는 배열순서까지만 출력해주고 나머지는 Cut해줍니다. 저는 0 ~ 140 index까지 나오도록 했습니다.

이 다음으로는 Bounus강의로 routing을 추가하는 강의가 있는데 이부분은 redux가 빠져있어서 완벽하지 않아서, 다음 FullStack 연습할때나 react Hook 연습을 할 떄에 해보기로 하고, 간단한 영화 App만들기를 마치고, 다시 고객관리시스템만들기로 넘어가겠습니다.

여태까지 React를 하면서 SPA기능을 갖추고, HTML을 빌드하며, Javasciprt나 API을 추상화하여 은닉하게 해주는 프론트 기술이라고고 생각이 들었습니다.
기존에는 Jqury나 HTML안에 sciprt로 JS를 연결시켜서 개발자도구를 보면 해당 내용이 다 나타났지만, React를 써주면 HTML을 빌드함과 동시에 자바스크립코드를 그 안에 바로 쓸 수 있고 은닉까지 가능하게 되니 정말 좋은 기술인것 같습니다.

<최종 화면>

0개의 댓글