[TIL] 순수 React 에서 비동기 함수 처리하기

[오늘 한 일]

• 알고리즘 5문제 풀기
• React.memo, useCallback, useMemo -> memoization 복습
• useEffect 사용하여 API 호출 방법 학습 (axios ~ then / async await)
• 숙련주차 개인과제 제출

순수 react 에서 비동기 함수 호출

이후에 배우게 될 redux-thunk, react-query는 모두 비동기 호출을 효율적으로 만들어주는 라이브러리이다.
그러나 순수 리액트에서도 비동기 호출이 가능하다.
useEffect 훅을 사용하고, dependency array를 빈 배열로 두어 첫 렌더링 시에만 API를 호출할 수 있도록 하면 된다.

방법 1️⃣ (fetch ~ then)

import React, { useState, useEffect } from "react";
import axios from "axios";

function App() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    axios
      .get("https://jsonplaceholder.typicode.com/posts")
      .then((response) => {
        setPosts(response.data);
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);

  return (
    <div>
      <h1>Posts</h1>
      {posts.map((post) => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.body}</p>
        </div>
      ))}
    </div>
  );
}

export default App;

방법 2️⃣ (async / await)

import React, { useState, useEffect } from "react";
import axios from "axios";

function App() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get(
          "https://jsonplaceholder.typicode.com/posts"
        );
        setPosts(response.data);
      } catch (error) {
        console.log(error);
      }
    };

    fetchData();
  }, []);

  return (
    <div>
      <h1>Posts</h1>
      {posts.map((post) => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.body}</p>
        </div>
      ))}
    </div>
  );
}

export default App;

<로딩 중> 표시하기

import React, { useState, useEffect } from "react";
import axios from "axios";

function App() {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get(
          "https://jsonplaceholder.typicode.com/posts"
        );
        setLoading(false);
        setPosts(response.data);
      } catch (error) {
        console.log(error);
      }
    };
    fetchData();
  }, []);
  console.log(posts);

  return (
    <div>
      {loading ? (
        <div>로딩중...</div>
      ) : (
        <ul>
          {posts.map((item) => (
            <li key={item.id}>
              <h3>{item.title}</h3>
              <p>{item.body}</p>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default App;

한 주가 또 지나갔다.
이번 주는 거의 숙련주차 개인과제만 작업했다.
과제가 처음 주어질 때는 막막한데, 하다보면 또 어떻게든 하게 된다.
어렵고 도전적인 과제일 수록 그만큼 성장하는 것 같기도 하다.
다음 주에는 또 팀 프로젝트가 주어질 텐데 또 얼마나 어렵고, 새로운 고비들을 마주할지 😂 두렵지만, 늘 그랬듯이 나는 또 그럭저럭 해내겠지요..