Next.js에서 REST API 호출하기 | fetch, async/await, useEffect

1. fetch로 API 호출하기

프론트엔드에서 백엔드 API를 호출할 때 fetch()를 사용할 수 있다.

fetch("http://localhost:8080/api/v1/posts")
    .then((res) => res.json())
    .then((data) => {
        console.log(data);
    });

fetch()는 서버에 요청을 보내고 Promise 객체를 반환한다.

Promise는 쉽게 말하면 나중에 받을 결과를 나타내는 객체이다.

따라서 API 응답을 바로 사용할 수 있는 것이 아니라, 비동기 작업이 완료된 후 결과를 받아야 한다.

 

Promise의 작업이 완료됐을 때 실행할 코드를 .then()을 이용해 처리할 수 있다.

첫 번째 .then()에서는 서버의 응답을 JSON 데이터로 변환하고, 두 번째 .then()에서는 변환된 데이터를 사용할 수 있다.

이처럼 .then()을 이어서 사용하는 방식을 Promise 체이닝이라고 한다.

2. async와 await

Promise는 async와 await를 이용해 작성할 수도 있다.

async function test() {
    const res = await fetch("http://localhost:8080/api/v1/posts");
    const data = await res.json();

    console.log(data);
}

test();

await는 Promise가 처리될 때까지 기다린 후 다음 코드를 실행한다.

따라서 코드의 흐름을 위에서 아래로 읽을 수 있어 비동기 작업을 비교적 쉽게 이해할 수 있다.

3. useEffect로 API 호출하기

React에서는 컴포넌트가 화면에 나타난 후 API를 호출해야 하는 경우가 있다. 이때 useEffect()를 사용할 수 있다.

useEffect(() => {
    // 실행할 코드
}, []);

 

useEffect()의 두 번째 인자인 []는 의존성 배열이다.

빈 배열을 전달하면 해당 컴포넌트가 처음 렌더링된 후 한 번 실행된다.

따라서 페이지가 처음 열렸을 때 게시물 목록을 가져오는 등의 작업에 사용할 수 있다.

'use client';

import { useEffect, useState } from "react";

export default function Page() {
    const [posts, setPosts] = useState([]);

    useEffect(() => {
        fetch("http://localhost:8080/api/v1/posts")
            .then((res) => res.json())
            .then((data) => {
                setPosts(data);
            });
    }, []);

    return (
        <div>
            {posts.map((post) => (
                <div key={post.id}>
                    {post.title}
                </div>
            ))}
        </div>
    );
}

처음에는 posts가 빈 배열이기 때문에 게시물이 화면에 나타나지 않는다.

이후 API 응답을 받으면 setPosts(data)를 통해 게시물 데이터를 저장하고, state가 변경되면서 React가 다시 렌더링하여 게시물 목록이 화면에 나타나게 된다.

왜 useEffect 안에서 호출하는가?

API 호출은 서버와 통신하는 외부 작업이다. React 컴포넌트가 렌더링될 때마다 API를 호출하도록 작성하면 불필요한 요청이 반복될 수 있다.

따라서 useEffect()를 사용해 컴포넌트가 처음 렌더링된 후 API를 호출하도록 처리하는 것이다.