REACT_Promise Then

Promise Then 사용하기 

: Promise 는 Callback 함수와 같이 비동기적으로 동작하는 코드를 동기적으로 구현할 때 사용한다

Promise 를 사용하려면 Callback 함수와 달리 , 코드 가독성을 높일 수 있고 예외 처리도 쉽게 할 수 있다

 

- R064_Promise.js

import React, { Component } from 'react';

class R064_Promise extends Component {
    componentDidMount() {
        new Promise(resolve => {
            setTimeout(function(){
                resolve('react');
            }, 1500);
        })
        .then(function(result){
            console.log(result);
            return result + 200;
        })
        .then(result => {
            console.log(result);
        })
    }

    render() {
        return (
            <h1>Promise</h1>
        )
    }
}
export default R064_Promise;

 

- App.js

import React from 'react';
//import './App.css'; 
//App.css가 App.js 보다 더 한 단계 상위 폴더에 있다면  
//'./..App.css'

import Promise from './R064_Promise'
//import 'bootstrap/dist/css/bootstrap.css'

function App() {
  return (
    <div>
      <h1>Start React 200!</h1>
      <Promise/>
    </div>
  );
}

export default App;

 

 

결과