React와 Node.js를 사용한 웹 애플리케이션(게시판) 개발 강좌(16)

게시글 목록 화면 구현: React에서 API 데이터를 불러와 리스트 컴포넌트 구현

이번 강의에서는 React에서 API를 통해 데이터를 불러와 게시글 목록을 화면에 표시하는 방법을 배웁니다. 데이터를 기반으로 한 리스트 컴포넌트를 만들고, React의 useEffect와 useState를 활용하여 데이터를 비동기적으로 처리하는 과정을 다룹니다.

React 애플리케이션이 API 로부터 데이터를 받아와 게시글 목록을 화면에 렌더링하는 과정

---

1. API 데이터를 불러오기

게시글 데이터를 백엔드 API에서 가져오기 위해 axios를 사용하여 GET 요청을 보냅니다. 먼저 게시글 목록을 보여줄 화면을 구성합니다.

1.1 axios 설치

axios는 HTTP 요청을 처리하는 라이브러리로, 데이터를 서버에서 가져올 때 주로 사용됩니다. 프로젝트에 axios를 설치합니다.

npm install axios

 

---

2. 게시글 목록 컴포넌트 구현

2.1 API 요청을 통한 데이터 가져오기

useEffect를 사용하여 컴포넌트가 처음 렌더링될 때 게시글 데이터를 API로부터 가져오고, useState로 상태 관리를 합니다.

// src/components/PostList.js
import React, { useState, useEffect } from 'react';
import axios from 'axios';

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

  // API 요청으로 게시글 데이터 가져오기
  useEffect(() => {
    axios.get('/api/posts')
      .then((response) => setPosts(response.data))
      .catch((error) => console.error('Error fetching posts:', error));
  }, []); // 빈 배열로 설정하여 첫 렌더링 시에만 실행

  return (
    <div>
      <h1>게시글 목록</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>
            <h3>{post.title}</h3>
            <p>{post.content}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default PostList;

2.2 코드 설명

• useEffect: 컴포넌트가 처음 렌더링될 때 API 요청을 보내 데이터를 가져옵니다. [ ] 빈 배열을 넣어 한 번만 실행되도록 설정합니다.
• useState: 가져온 게시글 데이터를 상태로 관리하여, 데이터를 화면에 렌더링합니다.
• axios.get('/api/posts'): 서버에서 게시글 데이터를 불러오는 API 호출을 수행합니다.

---

3. 데이터 기반의 리스트 렌더링

3.1 게시글을 화면에 리스트로 렌더링

map 메서드를 사용해 가져온 게시글 데이터를 순회하며, 각각의 게시글을 li 요소로 출력합니다. 이때, 각 항목에 key 속성을 지정하여 React에서 리스트를 효율적으로 렌더링할 수 있도록 합니다.

<ul>
  {posts.map(post => (
    <li key={post.id}>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </li>
  ))}
</ul>

3.2 데이터 없을 때의 처리

데이터가 없는 경우에는 "게시글이 없습니다"와 같은 메시지를 출력하여 사용자에게 상태를 알립니다.

return (
  <div>
    <h1>게시글 목록</h1>
    {posts.length > 0 ? (
      <ul>
        {posts.map(post => (
          <li key={post.id}>
            <h3>{post.title}</h3>
            <p>{post.content}</p>
          </li>
        ))}
      </ul>
    ) : (
      <p>게시글이 없습니다.</p>
    )}
  </div>
);

3.3 스타일링 추가

간단한 CSS를 추가하여 게시글 목록의 스타일을 개선할 수 있습니다.

/* src/components/PostList.css */
ul {
  list-style-type: none;
  padding: 0;
}

li {
  border-bottom: 1px solid #ccc;
  margin-bottom: 10px;
  padding: 10px 0;
}

h3 {
  margin: 0;
  font-size: 1.5em;
}

p {
  color: #666;
}

---

4. 프론트엔드에서 데이터 기반 게시글 목록 구현의 흐름

1. API 요청: useEffect 훅을 사용해 API를 통해 데이터를 가져옵니다.
2. 상태 관리: 가져온 데이터를 useState로 상태에 저장하고, 상태가 변경될 때 컴포넌트를 다시 렌더링합니다.
3. 리스트 렌더링: map 함수를 사용해 데이터를 순회하며 각 게시글을 화면에 출력합니다.
4. 에러 처리: 데이터를 불러오지 못했을 때는 오류 메시지를 출력하고, 데이터가 없을 때는 "게시글이 없습니다"와 같은 메시지를 표시합니다.

---

5. API 응답 예시

백엔드에서 제공되는 API의 응답 데이터는 다음과 같은 형식일 수 있습니다:

[
  {
    "id": 1,
    "title": "첫 번째 게시글",
    "content": "이것은 첫 번째 게시글의 내용입니다."
  },
  {
    "id": 2,
    "title": "두 번째 게시글",
    "content": "이것은 두 번째 게시글의 내용입니다."
  }
]

이 데이터를 기반으로 PostList 컴포넌트에서 게시글 목록을 렌더링합니다.

---

결론

이번 강의에서는 React를 사용해 API로부터 데이터를 받아와 게시글 목록을 화면에 출력하는 방법을 배웠습니다. useEffect와 axios를 사용하여 데이터를 비동기적으로 불러오고, useState로 상태를 관리하면서 동적인 UI를 구현할 수 있었습니다.