14장 외부 API 연동하여 뉴스 뷰어 만들기

순서

비동기 작업의 이해 -> axios로 API 호출해서 데이터 받아오기 -> newsapi API 키 발급 받기 -> 뉴스 뷰어 UI 만들기 -> 데이터 연동 -> 카테고리 기능 구현하기 -> 리액트 라우터 적용하기

비동기 작업의 이해

웹애플리케이션에서 서버 쪽 데이터가 필요할때는 Ajax를 사용하여 서버의 API를 호출함으로써 데이터를 수신. 이렇게 서버의 API를 사용해야 할때는 네트워크 송수신 과정에서 시간이 걸리기 때문이 응답을 받을 때까지 기다렷다가 전달받은 응답데이터를 처리한다. 이 과정에서 해당 작업을 비동기적으로 처리하게 된다.

콜백 함수

  setTimeout(() => {
    const result = number + 10;
    if (callback) {
      callback(result);
    }
  }, 1000);
}

console.log('작업 시작');
increase(0, result => {
  console.log(result);
  increase(result, result => {
    console.log(result);
    increase(result, result => {
      console.log(result);
      increase(result, result => {
        console.log(result);
        console.log('작업 완료');
      })
    })
  })
})

콜백 지옥의 예이며 이런 코드가 형성되지 않게 Promise가 나옴.

Promise

function increase(number) {
  const promise = new Promise((resolve, reject) => {
    //resolve는 성공, reject 실패
    setTimeout(() => {
      const result = number + 10;
      if (result > 50) {
        //50보다 높으면 에러
        const e = new Error("NumberTooBig");
        return reject(e);
      }
      resolve(result); //number 값에 +10 후 성공처리
    }, 1000);
  });
  return promise;
}

increase(0)
.then(number => {
  //promise에서 resolve 된 값은 .then을 통해 받아 올 수 있음
  console.log('시작');
  console.log(number);
  return increase(number);//Promise를 리턴하면
})
.then(number => {
  //또 then 으로 처리가능
  console.log(number);
  return increase(number);
})
.then(number => {
  console.log(number);
  return increase(number);
})
.then(number => {
  console.log(number);
  return increase(number);
})
.then(number => {
  console.log('끝');
  console.log(number);
  return increase(number);
})
.catch(e => {
  //도중 에러가 발생하면 .catch를 통해 알 수 있음.
  console.log(e)
})

async/await

Promise를 더욱 쉽게 사용 할수 있게 해주는 ES8 문법. 함수 앞부분에 async 키워드 추가, 해당 함수 내부에서 Promise 앞부분에 await 키워드를 사용한다. 이렇게 하면 Promise가 끝날 때 까지 기다리고 결과 값을 특정 변수에 담을 수 있다.

function increase(number) {
  const promise = new Promise((resolve, reject) => {
    //resolve는 성공, reject 실패
    setTimeout(() => {
      const result = number + 10;
      if (result > 50) {
        //50보다 높으면 에러
        const e = new Error("NumberTooBig");
        return reject(e);
      }
      resolve(result); //number 값에 +10 후 성공처리
    }, 1000);
  });
  return promise;
}

async function runTask() {
  try {
    //try.catch 구문을 사용해 에러를 처리
    let result = await increase(0);
    console.log("시작");
    console.log(result);
    result = await increase(result);
    console.log(result);
    result = await increase(result);
    console.log(result);
    result = await increase(result);
    console.log(result);
    result = await increase(result);
    console.log(result);
    result = await increase(result);
    console.log(result);
    console.log("끝");
  } catch (e) {
    console.log(e);
  }
}

runTask();

axios로 API 호출해서 데이터 받아오기

axios는 현재 가장 많이 사용되는 자바스크립트 HTTP 클라이언트. 이 라이브러리 특징은 HTTP요청을 Promise 기반으로 처리한다.

데이터 연동하기

userEffect를 사용해서 컴포넌트가 처음 렌더링 되는 시점에 API를 요청 할건데 주의 할 점은 useEffect에 등록하는 함수에 async를 붙히면 안된다. useEffect에서 반환해야 하는 값은 뒷정리 함수이기 때문이다. 따라서 useEffect 내부에서 async/await 를 사용하고 싶다면 함수 내부에 async 키워드가 붙은 또다른 함수를 사용해주어야 한다.

이번 프로젝틑 react-router 가 버전이 안맞아서 찾아보앗지만 끝까지 완료 하지 못하였다