새싹 프론트엔드 실무 과정 13주차 팀프로젝트 firebase data fetch

새싹 프론트엔드 실무 과정 13주차 팀프로젝트 firebase data fetch

 

우리조 노션에 올라가있던 firebase data fetch방법!

import React, { useEffect, useState } from "react";

const 폴더명 = () => {
  const [data, setData] = useState([]);
  const fetchdata = async () => {
    try {
      const res = await fetch(
        "firebase 경로"
      );
      const result = await res.json();
      setData([...result]);
    } catch (error) {
      console.log(error);
    }
  };

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

  return (
    <div>
      <div>~~페이지</div>
      <table>
        <thead>
          <tr>
            <th>authority</th>
            <th>email</th>
            <th>gender</th>
            <th>Ipaddress</th>
          </tr>
        </thead>
        <tbody>
          {data.map((element) => (
            <tr key={element.id}>
              <td>{element.authorrity}</td>
              <td>{element.email}</td>
              <td>{element.gender}</td>
              <td>{element.ip_address}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default 폴더명;

 

firebase 경로 확인하는 방법

 

➡ https:// ~~ .app➡/docu.json 으로 경로위치에 넣어주기!

 

 

 

새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 13주차 블로그 포스팅