React 백엔드 연동1 (react_no_003)

React 화면 기능을 아래와 같이 구현하려 합니다.

 

1. '생성' 버튼과 목록을 만든다

2. 버튼을 클릭하면  json 형태의 목록데이터를 리턴해주는 백엔드 url을 호출하고 
   결과를 화면에 목록으로 보여준다.

import React, { useState } 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);
    }
  };

  return (
    <div className="App">
      <header className="App-header">
        <h1>Get List</h1>
        <button onClick={fetchItems}>생성</button>
        <ul>
          {items.map((item, index) => (
            <li key={index}>{JSON.stringify(item)}</li>
          ))}
        </ul>
      </header>
    </div>
  );
}

export default App;

설명

1. 상태 관리:
   • useState 훅을 사용하여 items 상태를 관리합니다. 이 상태는 API에서 받아온 목록 데이터를 저장합니다.
2. 데이터 가져오기:
   • fetchItems 함수는 fetch API를 사용하여 지정된 URL에서 데이터를 가져옵니다.
   • 데이터를 JSON 형식으로 파싱한 후 items 상태를 업데이트합니다.
   • 오류가 발생할 경우 콘솔에 오류 메시지를 출력합니다.
3. 렌더링:
   • button 요소에 onClick 이벤트 핸들러로 fetchItems 함수를 설정하여 버튼 클릭 시 API를 호출합니다.
   • items 상태를 map 메서드를 사용하여 목록으로 렌더링합니다. 각 항목은 li 요소로 표시됩니다.
   • JSON 데이터를 문자열로 변환하여 각 목록 항목으로 표시합니다.