Enjoy Programming

지난 포스팅에 이어 영화를 랜더링해보겠다. api를 통해 얻어온 movies를 console.log해보면 이렇게 data를 확인 할 수 있다. 이번엔 movies.data.data.movies를 콘솔창에 띄워보자 이렇게 각 영화의 id~ url~ title~등등 정보를 확인 할 수 있다. 이제 render method에서 isLoading이 false로 바뀌면 ready를 리턴하도록 되어 있는데 movie data를 리턴하도록 바꿔보자. Movie.js파일을 하나만들고 역시 react와 Prop-types를 import 해주자. 그리고 movie component는 state가 필요없으므로 굳이 class component로 만들 필요가 없다 function component로 만들어보자. Movie 컴..

이제 fetch API를 이용해 movie data를 가져와보자. 그런데~ 니코쌤은 fetch보단 Axios를 더 좋은 방법이라고 한다. axios는 fetch위에 작은 layer가 올라가 있는거라고 생각하면 된다. 간단히 짚고 넘어가면 Axios는 node.js로부터 HTTP request를 만들거나 , ES6 Promise API를 지원하는 브라우저로 부터 XMLHttpRequest를 만들기 위해 사용하는 javascript 라이브러리이다. fetch()는 JSON데이터를 처리할 때 2단계를 거친다. 초기에 request를 보내고, 실제 data 오브젝트를 받으려면 response를 받는 측에서 .json()메소드를 사용해야 한다. 그리고 fetch()를 사용해서 response error가 발생했다..

component 의 life cycle까지 알아보았고. 이제 movie app을 만들기 위해 movie component를 구성해본다. state를 만들어주고 기본적으로 컴포넌트가 마운트 되면 라이프 사이클이 시작된다. 라이프 사이클은 마운트 되는 순간 시작되었으니 isLoading은 당연히 true이다. render에서 isLoading이 true이면 Loading을 아니라면~ Ready라고 알려준다. 자 이제 로딩이 끝나면 ready로 변경이 되어야 하는데~ 컴포넌트의 render를 하면 호출되는 life cycle method인 componentDidMount함수를 통해 setTimeout함수로 5초뒤 setState를 이용해 isLoading을 false로 바꿔준다. 6초뒤 브라우저는 Loadi..

react component에서 사용하는 유일한 function은 render function이다. 하지만 react class component는 단순히 render fucntion이외에 더많은 것이 있다. 이들은 life cycle method를 가지는데, 기본적으로 react가 component를 생성하고 다시 없애는 방법이다. 컴포넌트가 생성될 때, render전에 호출되는 몇가지 function이 있고~ render된 후 호출되는 다른 function들이 존재한다. 자 이제 life cycle method중 Mounting을 살펴보겠다. react 공식 문서에서 살펴보면 이 메소드는 컴포넌트의 인스턴스가 생성되어 Dom에 insert될 때 순서대로 호출된다고 한다. Mounting method중..

react의 Components에는 function conmponent와 class component가 있다. 앞서 포스팅한 내용은 function component들이고 이제 movie app을 만들 텐데 지금부터는 class component를 사용하겠다. class를 이용해 react class component(react에 이미 내장되어 있는 class component)로 부터 App class component에 extends했다. 현재는 App은 react.Component와 같은 역할을 한다. 기본적으로 Class react component는 return을 가지고 있지 않다. 무슨 말일까. 클레스 리액트 컴포넌트는 function이 아니기 때문에 return이 없다. 대신 render m..

기본적으로 클래스는 blueprint이다. 클래스는 화려한 object라고 한다. 먼저 클래스를 만들면서 이해해 보자. 클래스는 생성자(constructor)를 가지고 있다. User 라는 클래스를 만들고 constructor를 만들어 준다. this에 관한것은 차후 다루기로 하고 일단 class는 this도 가지고 있다. this.username 은 lee라고 명명해주고 console.log해주면 undefiend로 뜬다. 이제 할 일은 leeUser라는 User클래스의 instance를 생성해주겠다. 이렇게 instance를 생성해주고 나니 username에 대한 정보가 보인다. 그럼 instance는 무엇일까... 영어 사전을 보면 instance: 경우, 사례라고 뜬다. 직역해서 생각해보면 Use..