Dev/React (21) 썸네일형 리스트형 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들이 .. React 실습 -6 와우 또 왔군.. 가자ㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏ 여기서 이런 말을 하는 사람도 있어! state는 단지 object잔아 ? 이거로 뭘 할 수 있다는거야? 예를 들어서, 내가 add를 쓰고 싶을 때, 단지 this.state.count = 1을 할 수 있다는걸 의미 해 minus를 쓰고 싶을 땐, this.state.count = -1 단지 예일 뿐이야! 적용하고 런을 해보자! 오잉? 보다시피 동작하지 않지? state를 set해라, 직접 state를 변경하지 마라 라고 하네 왜 동작하지 않을까? 나는 state를 변경하고 있지만, state는 동작하지 않아! 나한테 보여주지 않아! 그 이유는, react는 render function을 refresh하지 않기 때문이야 저렇게 해서 작동한다는 것은 매번 s.. React 실습 -5 자자자자자ㅏ자자ㅏㅏ자자 이제 그동안 했던 food 예제들을 버려야 햌ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 겁나 아까운데 아까워하면 안돼 .. 이제 state에 대해 배워야 하는데 food 예제는 state를 위해 동작하지 않기 때문이야.. 왜냐면 이 데이터들은 내가 작성했어 state는 보통 동적 데이터와 함께 작업할 때 만들어져! 변하는 데이터, 존재하지 않는 데이터! 그리고 생겨나고 사라지고 또는 변경되고, 하나인 데이터가 두개가 되고 0이 되는 종류의 것들 이게 바로 dynamic data야! 그리고 이런 props는 우리를 돕지 않아!! 우리가 필요한건 state야 !!! 아아ㅏㅏㄲ!!!!!!!!!!!!!!!!!!!!!!! 자 슬프지만 다 지우자 .... 그리고 우리는 function compo.. 이전 1 2 3 다음
