[GPT가 알려주는] 몽고DB와 React 데이터 송수신

몽고DB에서 json데이터를 날리면, react에서 endpoinnt를 통해 데이터 fetch받을수있을까?

 

 

완전 가능해! 😎
React에서 MongoDB 데이터를 받아오기는 다음 구조로 이루어져:

 

 

✅ 전체 구조 흐름 요약

 

 

✅ 핵심 포인트

❗ React는 직접 MongoDB에 접근 못 함.
백엔드 서버(API)를 통해서만 데이터를 받아야 해.

 

✅ 예시 흐름

📦 1. MongoDB에 JSON 문서 저장

{
"_id": "abc123",
"name": "장치001",
"lat": 37.5665,
"lng": 126.9780
}

 

 

🛠 2. 백엔드(Node.js + Express + Mongoose)

app.get('/api/devices', async (req, res) => {
     const devices = await DeviceModel.find();
     res.json(devices); // 👉 JSON으로 응답
});

 

⚛️ 3. 프론트엔드(React)에서 fetch

import { useEffect, useState } from 'react';

function DeviceList() {
  const [devices, setDevices] = useState([]);

  useEffect(() => {
    fetch('/api/devices')
      .then(res => res.json())
      .then(data => setDevices(data));
  }, []);

  return (
    <ul>
      {devices.map(d => (
        <li key={d._id}>{d.name} - 위치: {d.lat}, {d.lng}</li>
      ))}
    </ul>
  );
}

✅ 요약 정리

항목	설명
MongoDB	JSON 형식 데이터 저장소
Express 백엔드	React에게 JSON으로 응답해주는 API 역할
React	fetch 또는 axios로 API 요청 → 상태에 저장 → 화면 렌더링

 

✅ 한 줄 요약

MongoDB → 백엔드 API(JSON) → React에서 fetch 가능!
React는 직접 MongoDB에 접근 못 하고, 반드시 Express 같은 API 서버를 통해 받아야 함.

 

필요하면 MongoDB + Express + React + 지도까지 연동 예제도 전체 코드로 보여줄 수 있어! 😄
혹시 백엔드 서버 직접 만드는 것도 도와줄까?