우리는 API에서 data를 가져왔다. console.log를 통해 데이터를 확인해보자. console.log(movies); movies라는 object가 콘솔창에 표시된다. 여기서 우리는 data를 원한다. data를 클릭해보면 그 안에 또 data가 있고 그 안에 movies가 있는 것을 확인할 수 있다. 따라서 우리는 movies.data.data.movies를 사용할 수 있다. 또한 movies.data.data.movies보다는 다음과 같은 방식을 사용하자. getMovies = async () => { const { data: { data: { movies }, }, } = await axios.get('https://yts.mx/api/v2/list_movies.json'); console..

일반적으로 javascript에서 data를 fetch하는 방법은 fetch()를 사용하는 것이다. 하지만 더 좋은 방법이 있는데, 바로 Axiod이다. 좋다, 우리는 axios를 사용할 것인데, 왜냐면 많이 사용되고 좋은 방법이기 때문이다. axios는 매우 쉬운 개념인데, 마치 fetch 위에 있는 작은 layer(층)라고 개념을 잡으면 편하다. 예를 들어서, axios는 땅콩 주위를 감싸고 있는 멋진 초콜릿이라고 생각하면 쉽다. 하지만 axios를 사용하려면, 우선 우리는 axios를 설치해야한다. 설치하는 방법은 매우 쉽다. npm i axios 위 코드를 터미널에 입력하면 끝이다. 이제 우리가 쓸 API에 대해서 알아보자. 우리는 YTS에서 만든 API를 사용할 것이다. 우선 axios를 imp..

자 이제 우리는 component life cycle을 알게 됐다. 이제 movie component를 구성해 보자. import React from 'react'; // import PropTypes from 'prop-types'; class App extends React.Component { state = { isLoding: true, }; componentDidMount() {} render() { const { isLoding } = this.state; return {isLoding ? 'Loading...' : 'We are ready'}; } } export default App; 자 우선 application이 mount(알다시피 mount는 생겨나는 것, 태어나는 것, 살아 있는 것..