react 동기와 비동기

 

 

import React,{Component} from 'react';

import './App.css';

class App extends Component {
  f1(callback){
    console.log('callback');
    
    callback()
  }
  render() {
    this.f1(function(){
      console.log('todo 1');
      console.log('todo 2');
      console.log('todo 3');
    })
    return (
      <div>
        <h1>호랑이</h1>
      </div>
    );
  }
}

export default App;

 

 

-콜백 지옥

// 동기 방식
class App extends Component {  
  render() {
    //callback 지옥
    setTimeout(() => {
      console.log('1');      
      setTimeout(() => {
        console.log('2'); 
        setTimeout(() => {
          console.log('3');      
        }, 1000); //보안 설정 
      }, 2000);//계정확인
    }, 3000);//서버 접속 시간
   
   
    return (
      <div>
        <h1>호랑이</h1>
      </div>
    );
  }
}

 

 

//promise resolve,reject는 함수
//new promise(()=>{})
class App extends Component {
  render() {
    new Promise( (resolve, reject)=>{
      setTimeout(() => {
        console.log('1');        
        resolve();
      }, 3000);
      //인수를 전달하게 되면 then의 
                //람다에서 받는다
    } )
    .then(()=>{
      new Promise( (resolve, reject)=>{
        setTimeout(() => {
          console.log('2');        
          resolve();
        }, 2000);
        
                  
      } )
      .then(()=>{
        new Promise( (resolve, reject)=>{
          setTimeout(() => {
            console.log('3');           
            resolve(); 
          }, 1000);                          
        } )
      })
    })
    return (
      <div>
        
      </div>
    );
  }
}

 

 

 

 

class App extends Component {
    render() {
      new Promise( (resolve, reject)=>{
        setTimeout(() => {
          console.log('1');        
          resolve();
        }, 3000);
        //인수를 전달하게 되면 then의 
                  //람다에서 받는다
      } )
      .then(()=>{
        new Promise( (resolve, reject)=>{
          setTimeout(() => {
            console.log('2');        
            resolve();
          }, 2000);
          
                    
        } )
        .then(()=>{
          new Promise( (resolve, reject)=>{
            setTimeout(() => {
              console.log('3');           
              resolve(); 
            }, 1000);                          
          } )
        })
      })
      return (
        <div>
          
        </div>
      );
    }
  }

 

 

class App extends Component {
  render() {
    new Promise((resolve,reject) =>{
        if(3>2){
            resolve('독수리');
        }else{
            reject('앵무새');
        }
    })
    .then((result) =>{
        console.log(result);
    })
    .catch((result) =>{
      console.log(result);
    })
    return (
      <div>
        
      </div>
    );

 

 

 

 

//1번 함수는 이것은 죽은 코드이다.
class App extends Component {
  f1 =() =>{
    //fetch가 비동기 함수이다.
    const response =fetch('http://date.jsontest.com/');
    console.log(response);
    //json 도 비동기이다.
    const body = response.json();
    console.log(body.date);

  }
  f2 =() =>{
    //fetch가 비동기 함수이다.
      fetch('http://date.jsontest.com/') //promise
    .then(response =>{
      console.log(response.type);
      response.json() //promise
      .then(body =>{
        console.log(body.date);
      })
    })
  }
  render() {
    return (
      <div>
        <button onClick={this.f1}>버튼1</button>
        <button onClick={this.f2}>버튼2</button>

      </div>
    );
  }
}

 

 

 

//1번 함수는 이것은 죽은 코드이다.
class App extends Component {
  // f1 =() =>{
  //   //fetch가 비동기 함수이다.
  //   const response =fetch('http://date.jsontest.com/');
  //   console.log(response);
  //   //json 도 비동기이다.
  //   const body = response.json();
  //   console.log(body.date);

  // }
  f2 =() =>{
    //fetch가 비동기 함수이다.
      fetch('http://date.jsontest.com/') //promise
    .then(response =>{
      console.log(response.type);
      response.json() //promise
      .then(body =>{
        console.log(body.date);
      })
    })
  }
  render() {
    return (
      <div>
        <button onClick={this.f1}>버튼1</button>
        <button onClick={this.f2}>버튼2</button>

      </div>
    );
  }
}

 

 

 

 

  f3 = async() =>{
    //fetch가 비동기 함수이다.
     const response = await fetch('http://date.jsontest.com/') //promise
     const body = await response.json() //promise  
     console.log(body.date);
  }
  render() {
    return (
      <div>
        <button onClick={this.f1}>버튼1</button>
        <button onClick={this.f2}>버튼2</button>
        <button onClick={this.f3}>버튼3</button>
      </div>
    );
  }
}

 

 

f4 = () =>{
    new Promise( (resolve, reject)=>{
              setTimeout(() => {
                console.log('1');        
                resolve();
              }, 3000);
              //인수를 전달하게 되면 then의 
                        //람다에서 받는다
            } )
            .then(()=>{
              new Promise( (resolve, reject)=>{
                setTimeout(() => {
                  console.log('2');        
                  resolve();
                }, 2000);
                
                          
              } )
              .then(()=>{
                new Promise( (resolve, reject)=>{
                  setTimeout(() => {
                    console.log('3');           
                    resolve(); 
                  }, 1000);                          
                } )
              })
      })
  }

 

 

 

 f5 = async() =>{
       await new Promise( (resolve, reject)=>{
              setTimeout(() => {
                console.log('1');        
                resolve();
              }, 3000);
              //인수를 전달하게 되면 then의 
                        //람다에서 받는다
            } )
              await new Promise( (resolve, reject)=>{
                setTimeout(() => {
                  console.log('2');        
                  resolve();
                }, 2000);       
              })                                   
                await new Promise( (resolve, reject)=>{
                  setTimeout(() => {
                    console.log('3');           
                    resolve(); 
              }, 1000);                          
      })
     }
     fetchfect = (num,ms) => {
      return new Promise( (resolve, reject)=>{
        setTimeout(() => {
          console.log(num);        
          resolve();
        }, 3000);
        //인수를 전달하게 되면 then의 
                  //람다에서 받는다
      } )
     }
     f6 = async() =>{      
      await this.fetchfect(1, 3000)
      await this.fetchfect(2, 2000)     
      await this.fetchfect(3, 1000)     
    }