Dev (122) 썸네일형 리스트형 React -13: 완성! 원래 더 뭐를 쓰려고 했는데 뭐가 더 없네 .. 그냥 css 입히고 끝이야... 근데 이정도면 api 가져와서 쓸 수 있을 정도 됐으니까! 리액트를 어느정도 다룰 수 있다고 할 수 있지 않을ㄲ..? 응 아니야... 일단 나 같은 경우엔 이렇게 구현했어! 리액트 공부라서 반응형은 시간낭비 같아서 일부러 구현하지 않았고 다른 프로젝트로 다시 한번 해보려고 해!! 다음 리액트로 다시 한번 해보자고 !! 나도 처음이라 설명 잘 못한게 많은거 같은데 .. 다음에서는 더 열심히 해볼게 가자가ㅏ자갖가자갖가자갖 참고: nomadcoders.co/ swiper motion(without scrollMagic) 보호되어 있는 글입니다. React -12 : Genres 추가하기! 항히아히아히아히ㅏㅣㅎ이하이항 좋은 데모를 가지고 왔어! 짜잔!! dribbble.com/shots/2442798-Movie-Application 이 주소로 가면 볼 수 있어! 이 디자인을 한번 카피해보자고!! 사진처럼 유저, 좋아요, 스타 이런건 없지만 장르는 가지고 있잔아? 그럼 바로 추가! 이제 할 줄 알지?? 혼자 해보고 보는걸 추천 해! 장르는 배열로 되어 있는거 확인했지 ? 따라서 이렇게 해야 해! 그리고 class를 className으로 전부 바꿔줘! React에서는 class를 className으로 표기 해줘야 해!! 이렇게 하면 콘솔에 key값 에러가 나오지? 사실 map은 또 다른 argument 하나가 주어져! 하나는 현재의 item이고 다른 하나는 item number야! 확인 해보자.. React 실습 - 11 : 이제 꾸며보자ㅏㅏㅏ 이제 html을 약간 손보고 css도 해보자ㅏㅏ!!!! 우선, div를 section class="container"로 바꿔주고! "Loading"을 HTML로 만들자 Loading... 이렇게 추가한다면! 이렇게 나오지!? 오케이! 그리고 movie를 movie component로 만들거야! 이렇게 해보자! ()를 넣어서 좀 더 보기 쉽게 정리 했어!! 그리고 Movie.js에서 이렇게 수정! 실습하는데 ID는 필요 없어서 빼놨어!! 런 !! 오마갓! 멋져멋져~ 이제 예쁘게 만들어보자고! create-react-app 덕분에 css 통합이 너무 너무 쉬워! react에 많은 옵션으로 component를 더 멋지게 만들 수 있어! 지금은 style component를 써보자! 사실 이 부분도 조금 배우긴.. React - 클래스형과 함수형의 차이!! 원래 안끊고 가려고 했는데 표기하는데 있어 여러가지 방법이 있는걸 알고 편한거 썼으면 좋겠어서 포스트 해! 출처 남겨놨으니까 글쓴이 블로그도 한번 방문해 줘!! 고고 !! 1. 클래스형 컴포넌트 react 컴포넌트 선언하는 두가지 방식 중 하나. [클래스 컴포넌트 & 함수 컴포넌트] 현재 자주 사용하지 않지만, 사용하는 기업들이 있다. 그 프로젝트의 유지보수를 위해서는 클래스형 컴포넌트에 대한 개념은 알고 있어야한다. 2. 클래스형 컴포넌트와 함수형 컴포넌트 차이 1) 선언 방식 함수형 컴포넌트 import React from 'react'; import './App.css'; function App() { const name = 'react'; return {name} } export default A.. React 실습 -9 : Fetching Movies from API 보통 JavaScript에서 data를 fetch 하는 방법은 fetch를 사용하는 거야 fetch보다 더 좋은 방법이 있는데 바로 Axios ! 여기서는 axios를 사용해보자! axios가 어떻게 동작하냐면, 겁나 쉬워 axios는 마치 fetch 위에 있는 작은 layer야 예를 들면, axios는 초콜릿 주위의 멋진 땅콩 같은 거야! 하지만 우리는 axios를 설치해야 해.. 근데 겁나 쉬워 터미널에 한 줄만 추가해주면 돼! npm install axios 끝! 좋아 좋아!! 이제 우리가 쓸 API에 대해서 얘기할게 우리는 YTS에서 만든 API를 사용할 거야 yts.lt에 접속해서 제일 밑에 API 클릭하고 List Movies를 클릭하면 이렇게 나오는데 https://yts.mx/api/v2/.. React 실습 -8 : Movie Component 우리는 component life cycle을 알게 됐어!! 이제 다 삭제.. 하고 movie component를 구성해보자고! 알다시피 mount는 생겨나는 것, 태어나는 것, 살아 있는 거야 mount 되자마자 isLoading은 기본적으로 true야 기본적으로 Loading이라는 건 명백해 왜냐면 이건 loading 중 이거든 이렇게 작성하고! return에 삼항 연산자로 추가해보자! react 아니야 JS야! 그러니까 삼항 연산자가 되는 거야!! 생각해야 돼 JS!! isLoading이 true면 Loading, false면 We are ready를 보여 줘! 결과는? 이제 감이 오지? 정의되지 않았거든 우리는 항상 this.state를 사용해야 해!! isLoading 앞에 this.state를.. React 실습 -7 바로바로 흐름 끊지 말고 가보자ㅏㅏㅏ 지금 코드를 보면 이렇게 되어 있겠지? 좋아좋아! 작업한 것 중에 react component에서 사용하는 유일한 function은 render function이야! add minus function은 둘 다 우리가 만든거잔아? component랑 react class component는 단순히 render말고 더 많은걸 갖고 있어! 이 component들은 life cycle method를 가지는데 life cycle method는 기본적으로 react가 component를 생성하고 없애는 방법이야! component가 생성될 때, render 전에 호출되는 몇가지 function이 있어! component가 render 된 후, 호출되는 다른 function들이 .. 이전 1 ··· 9 10 11 12 13 14 15 16 다음
