[React] movie_app//7. AJAX

componentDidMount(){

setTimeout(() => {

this.setState({

movies : [

{

title : '무비1',

poster : 'https://az720974.vo.msecnd.net/blog/sass.png'

},

{

title : '무비2',

poster : 'https://cdn-images-1.medium.com/max/1200/0*UR0r5pSLQbvP_yUo.png'

},

{

title : '무비3',

poster : 'https://www.atulhost.com/wp-content/uploads/2016/02/ruby-on-rails.jpg'

},

{

title : '무비4',

poster : 'http://mblogthumb4.phinf.naver.net/MjAxODAxMTBfMTM4/MDAxNTE1NTU1ODc5MTk0.42pl6F-FISN

E6XbWKxkLfIvCMizTFlxd3Wm1ph-J4S4g.ecTO50jeZk4-KdNJfi5vHRxeFDIn1e0spox-hCO-jcsg.JPEG.

complusblog/django-logo-negative.jpg?type=w800'

},

{

title:"무비5",

poster : 'https://cdn-images-1.medium.com/max/910/1*BCZkmZR1_YzDZy22Vn4uUw.png'

}

]

})

}, 3000)

}

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

componentDidMount(){

fetch('https://yts.am/api/v2/list_movies.json?sort_by=rating')

}

위의 상단 코드는 직접 데이터를 입력한 것이다.

그리고 아래는 ajax를 이용하여 데이터베이스에서 불러오는 방법이다.

설명하지 않아도 위와 아래의 차이는 크다.

지금부터 사용방법을 알아보자

console.log(fetch('https://yts.am/api/v2/list_movies.json?sort_by=rating'))

일단 위의 코드에 콘솔로그를 취하면

Promise라는 값을 리턴한다.

Promise는 일단 비동기로 작동함

동기는 첫번째 줄부터 차례대로 동작하는것

비동기는 모든 줄이 동시에 작용하는 것임

그리고 Promise는 두가지 시나리오를 가지는 데

약속을 지키던지 지키지 못하던지임

componentDidMount(){

fetch('https://yts.am/api/v2/list_movies.json?sort_by=rating')

.then(뭐든좋음 => 뭐든좋음.json())

.then(뭐든좋다구=> console.log(뭐든좋다구))

.catch(에러 => console.log(에러))

}

fetch는 데이터베이스의 데이터를 가지고 오고

then은 Promise가 실행 될 시 실행 되는 것이고

(이때, 성공 실패 여부를 판단하지 않음 걍 실행되고 난 후임)

catch는 실행되지 않을 시에 발생하는 에러를 잡아주는 기능을 함

then과 catch는

펑션 파라미터를 가지며

펑션에는 fetch로 가져온 값들 그리고 then으로 변형된 값들이 차례대로 들어감

첫번째 then에선

데이터베이스의 데이터 값이 들어갔고 그 값은 json화 시킴

두번째 then에선

json화 시킨 데이터를 콘솔로그로 찍음

catch선 에러를 찍음

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

콘솔로그찍은 값은

다음과 같이 movies나 각각의 데이터가 정리되어 나옴!