React 백엔드 연동2 (react_no_004)

React 백엔드 연동1 에서 만든 코드를 실행해보면 json 데이터를 그대로 화면에보여주고 있습니다. 

이번에는 json 데이터를 표형태로 변환해서 보여주도록 코딩을 변경하는 방식으로 코드를 수정합니다.

 

그리고 화면이 처음수행 될 때 실행버튼 클릭이 자동으로 한번 수행되어 목록을 조회하도록 해줍니다.

import React, { useState, useEffect } from 'react';
import './App.css';

function App() {
  const [items, setItems] = useState([]);

  const fetchItems = async () => {
    try {
      const response = await fetch('/getList'); //백엔드 url
      const data = await response.json();
      setItems(data);
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };

  useEffect(() => {
    fetchItems();
  }, []);

  return (
    <div className="App">
      <header className="App-header">
        <h1>Get List</h1>
        <button onClick={fetchItems}>생성</button>
        <table>
          <thead>
            <tr>
              <th>번호</th>
              <th>항목1</th>
              <th>항목2</th>
              <th>항목3</th>
              <th>항목4</th>
              <th>항목5</th>
              <th>항목6</th>
            </tr>
          </thead>
          <tbody>
            {items.map((item, index) => (
              <tr key={index}>
                <td>{item.sort_idx}</td>
                <td>{item.noa}</td>
                <td>{item.nob}</td>
                <td>{item.noc}</td>
                <td>{item.nod}</td>
                <td>{item.noe}</td>
                <td>{item.nof}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </header>
    </div>
  );
}

export default App;

최초 실행 시 "생성" 버튼을 자동으로 실행하려면 React의 useEffect 훅을 사용하여 컴포넌트가 마운트될 때 fetchItems 함수를 호출하도록 하면 됩니다.

 

코드 설명(자동실행)

1. useEffect 훅 사용:
   • useEffect 훅을 사용하여 컴포넌트가 마운트될 때 fetchItems 함수를 호출합니다.
   • 두 번째 인자로 빈 배열 []을 전달하여, 이 효과가 컴포넌트의 처음 렌더링 시에만 실행되도록 합니다.
2. 최초 실행 시 데이터 가져오기:
   • 컴포넌트가 처음 렌더링될 때 fetchItems 함수가 호출되어 백엔드 API에서 데이터를 가져옵니다.
   • 데이터가 성공적으로 받아지면 items 상태가 업데이트되고, 목록이 화면에 표시됩니다.

 

React 애플리케이션에서 JSON 데이터를 표 형태로 표시하려면, 데이터를 테이블 형식으로 렌더링하는 기능을 추가해야 합니다.

 

코드 설명(표렌더링)

1. 1. 표 렌더링:
      • <table> 요소 내에 헤더(<thead>)와 본문(<tbody>)을 정의합니다.
      • 데이터가 로드되면 items 배열을 map 메서드를 사용하여 각 항목을 표의 행(<tr>)으로 렌더링합니다.

 

표의 가독성을 높이기 위해 아래와 같이 css 파일을 수정합니다. (App.css)

.App {
  text-align: center;
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

button {
  margin: 20px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

table {
  margin: 20px;
  border-collapse: collapse;
  width: 80%;
  color: #282c34;
  background: white;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
}

th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: center;
  background-color: #61dafb;
  color: white;
}

td {
  text-align: center;
}