일반적으로 javascript에서 data를 fetch하는 방법은 fetch를 사용하는 것이다. 근데 더 획기적인 방법 axios가 있다!! 자 그럼 한번 설치해보자. npm install axios YTS에서 만든 API를 사용해보자. https://yts.mx/ The Official Home of YIFY Movies Torrent Download - YTS The official YTS YIFY Movies Torrents website. Download free yify movies torrents in 720p, 1080p and 3D quality. The fastest downloads at the smallest size. yts.mx https://yts.mx/api API Docume..

자 그럼 Movie Component를 구성해보자. mount되지마자 isLoading은 기본적으로 true로 정해놓고 다음과 같이 return해주자~! import React from "react"; class App extends React.Component { state = { isLoading: true, }; render() { return {this.state.isLoading ? "Loading" : "We are ready"}; } } export default App; 근데 this.state다 입력하기 힘드니 다음과 같이 바꿔주자~! 그럼 다음과 같이 출력된다. 자 맨처음에는 componentDidMount가 component가 mount되자마자 호출된다. 자 그럼 delay funct..

먼저 sate들에대해서 배워보자~! 참고 https://reactjs.org/docs/state-and-lifecycle.html State and Lifecycle – React A JavaScript library for building user interfaces reactjs.org 더보기 State and Lifecycle This page introduces the concept of state and lifecycle in a React component. You can find a detailed component API reference here. Consider the ticking clock example from one of the previous sections. In Render..

state를 바꾸기 위해 다음과 같이 작성하면 다음과 같은 경고창이 뜬다. 이렇게 하면 react는 render function을 refresh하지 않기 때문이다! 그래서, 우리는 매번 state의 상태를 변경할 때 react가 render function을 호출해서 바꿔주길 원한다는 말인데 state.count = 20이라고 하면 다시 render function이 호출되기 원한다는 것이다! 우리는 왜 직접 state를 변경하지 말라는 경고를 받을까? setState function을 호출하면 react는 똑독해서 우리가 언제 setState를 호출할지를 알고 또한 내가 view를 refresh하길 원하는 걸 알고 render function을 refresh하길 원하는걸 안다! 나는 내 state를 바..

자 그럼 이번에는 Class Component로 만들어보자~! 다 지우고, 다음과 같이 나타내보자. 우리가 매번 component를 만들 때마다 모든것을 구현하고싶지 않기 때문에, exteds를 하였다.~! 그래서 우리의 App component는 react component다. react component는 function이 아니기 때문에 return 을 가지고 있지 않다. render method를 가지고있고, 이 App component안에 있다. 왜냐하면 react component에서 확장했기 때문에! react component가 render method를 가지고 있어서, extend from 을 했기 때문에 이제 render method가 있다!!! 보다시피 class component와 f..

자 그럼 우리의 prop을 점검해보자. father component로부터 전달받은 props가 우리가 예상한 props인지! 자 그럼 rating을 추가해보자 import React from "react"; const foodILike = [ { id: 1, name: "Kimchi", image: "http://aeriskitchen.com/wp-content/uploads/2008/09/kimchi_bokkeumbap_02-.jpg", rating: 8, }, { id: 2, name: "Samgyeopsal", image: "https://3.bp.blogspot.com/-hKwIBxIVcQw/WfsewX3fhJI/AAAAAAAAALk/yHxnxFXcfx4ZKSfHS_RQNKjw3bAC03AnAC..