더 예쁘게 만들어보쟈 App.js import React from 'react'; import axios from 'axios'; import Movie from './Movie'; class App extends React.Component { state = { isLoading: true, movies: [] } getMovies = async () => { const { data: { data: { movies } } } = await axios.get("https://yts.mx/api/v2/list_movies.json?sort_by=rating"); this.setState({movies, isLoading: false}); } componentDidMount() { this.getMovies..

좋아, 이제 API에서 data를 가져왔어, console.log로 우리가 무슨 데이터를 보자, data를 제외하고는 신경안써도됨.! data - data - movies를 원한다. console.log(movies.data.data.movies); 하면 20개의 movie 리스트를 받을 수 있다. 하지만 밑줄친 부분은 별로다. 왜냐하면 우리는 ES6를 사용하는데, ES6는 ECMA script의 새로운 버전이다. getMovies = async () => { const {data:{data:{movies}}} = await axios.get("https://yts.mx/api/v2/list_movies.json"); console.log(movies); } 이렇게 쓰는 것이 더 좋다. 이 받은 movi..

일반적으로 사람들이 JS에서 data를 fetch하는 방법은 fetch를 사용한는 것이다. coponentDidMount(){ fetch() } 하는 방법도 있지만 니콜라스가 선호하는 방법은 Axios라고 부르는 것이다. axios 는 마치 fetch 위에 있는 작은 layer다. 이건 매우 쉽지만 우리는 axios를 설치해야 한다. TERMINAL에 npm i axios를 해주면 된다. 우리가 쓸 API에 대해서 이야기할게, 우리는 YTS에서 만든 API를 사용할 것이다. YTS 검색 - 사이트 하단에 API 클릭 - list Moive - .json 복사 yts는 불법적으로 영화를 올리는 거라서 url이 항상 변경된다. 그래서 니콜라스가 yts proxy API를 만들었다. API를 사용하려면 htt..

지난 시간 배웠던 component life cycle에 대해서 다시 정리해보고, data를 fetch하는 법을 배워보자 이제 data를 fetch할 시간이다~ application을 mount(생겨나는 것, 태어나는 것, 살아 있는 것)하자마자 isLoading : true이다. javascript ternary oprator(삼항 연산자) 이건 react가 아니라 javaScript야. import React from 'react'; class App extends React.Component{ state = { isLoading: true } render(){ return {this.state.isLoading ? "Loading" : "We are ready"} } } export default ..

react component에서 사용하는 유일한 function은 render function 이다. add()와 minus() 둘다 우리가 만든 것이다. 하지만 react component, react class component는 단순히 render말고 더 많은 것을 가지고 있다. 이들은 life cycle method를 가지는데, life cycle method는 기본적으로 react가 component를 생성한고 없애는 방법이다. component가 생성될 때, render 전에 호출되는 몇 가지 function이 있다. add button을 눌렀을 때, +1 +1 +1되면서 component가 update 될 때, 호출되는 다른 function이 있다. 여러가지가 있지만 가장 중요한 것들만 살펴..

이번 시간에는 어떻게 state를 업데이트 할 수 있을지에 대해서 배워보자! 니꼴라스 state는 단시 object 잖아! 이걸로 뭘 할 수 있다는 거야..? 니꼴라스 : 내가 add를 쓰고 싶을 때, 단지 this.state.count = 1을 할 수 있다는 걸 의미한다. 하지만 너도 보다시피, 우리는 object를 가지고 있고 이렇게 이야기해 "절대 state를 직접 변경하지 마시오." add = () => { console.log("add"); this.state.count = 1; } minus = () => { console.log("minus"); this.state.count = -1; } state를 set해라. 직접 state를 변경하지 마라 나는 state를 변경하고 있지만, state..