1. 비동기 작업의 이해

👣 서버의 API를 사용할 때는 네트워크 송수신 과정에서 시간이 걸리기 때문에 작업이 즉시 처리되지 않고 응답을 기다렸다가 전달받은 응답 데이터 처리 ➡️ 비동기적으로 처리

👣 비동기적으로 처리 : 웹 애플리케이션이 멈추지 않음

➡️ 동시에 여러 가지 요청 처리, 기다리는 과정에서 다른 함수 호출 가능

👣 서버 API 호출 외에 비동기적 처리하는 경우 : setTimeout 함수 사용ㅎ여 특정 작업 예약할 때

👀 자바스크립트에서 비동기 작업할 때 가장 흔히 사용하는 방법 : 콜백 함수 사용

1. 콜백 함수

👣 콜백 안에 콜백을 넣어서 구현 하면 가독성이 떨어짐 : '콜백 지옥'

2. Promise

👀 Promise

👣 콜백 지옥같은 코드가 형성되지 않게 하는 방안으로 ES6에 도입된 기능
👣 여러 작업을 연달아 처리할 때는 .then을 사용해 그 다음 작업 설정

3. async/await

👀 async/await

👣 Promise를 쉽게 사용할 수 있도록 해 주는 ES2017(ES8)문법
👣 함수의 앞부분에 async
👣 해당 함수 내부에서 Promise의 앞부분에 await
👣 Promise가 끝날 때까지 기다리고, 결과값을 특정 변수에 담을 수 있음

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

$ yarn add axios

👀 axios

👣 현재 가장 많이 사용되고 있는 자바스크립트 HTTP 클라이언트
👣 HTTP 요청을 Promise 기반으로 처리

//App.js

import { useState } from 'react';
import axios from 'axios';

const App = () => {
 const [data, setData] = useState(null);
 const onClick = async () => {
   try {
     const response = await axios.get(
       'https://jsonplaceholder.typicode.com/todos/1',
     );
     setData(response.data);
   } catch (e) {
     console.log(e);
   }
 };
 return (
   <div>
     <div>
       <button onClick={onClick}>불러오기</button>
     </div>
     {data && (
       <textarea
         rows={7}
         value={JSON.stringify(data, null, 2)}
         readOnly={true}
       />
     )}
   </div>
 );
};

export default App;

👣 axios.get 함수 : 파라미터로 전달된 주소에 GET 요청

3. newsapi API 키 발급받기

//App.js

import { useState } from 'react';
import axios from 'axios';
const App = () => {
  const [data, setData] = useState(null);
  const onClick = async () => {
    try {
      const response = await axios.get(
        'https://newsapi.org/v2/top-headlines?country=kr&apiKey=37a57fbe88bd41c492d9895b0382b1df',
      );
      setData(response.data);
    } catch (e) {
      console.log(e);
    }
  };
  return (
    <div>
      <div>
        <button onClick={onClick}>불러오기</button>
      </div>
      {data && (
        <textarea
          rows={7}
          value={JSON.stringify(data, null, 2)}
          readOnly={true}
        />
      )}
    </div>
  );
};
export default App;

4. 뉴스 뷰어 UI 만들기

$ yarn add styled-components

5. 데이터 연동하기

👀 useEffect 함수

👣 컴포넌트가 처음 렌더링되는 시점에 API 요청
👣 useEffect에 등록하는 함수에 async를 붙이면 안됨
👣 useEffect에서 반환하는 함수는 뒷정리 함수

6. 카테고리 기능 구현하기

7. 리액트 라우터 적용하기

$ yarn add react-router-dom

👣 path에 /:category?와 같이 맨 뒤에 물음표가 들어가는 것은 category 값이 선택적이라는 의미

8. usePromise 커스텀 Hook 만들기

👀 커스텀 Hook을 사용하면 Promise를 사용해야 하는 경우 더욱 간결하게 코드를 작성할 수 있음