[React.js] Typescript로 초기 셋팅4 - firebase 연동 및 호출

firebase 사용 방법 포스팅 (바로가기)

 

8. firebase에 json 파일을 올려 최종 프로젝트 호출하기

준비한 json 파일

(참고 : json 파일은 보통 아래와 같이 작성한다.)

{

  "WorkList" : {

    "first" : [

      {

        "id": "general1",

        "title": "welcome general1"

      },

      {

        "id": "general2",

        "title": "welcome general2"

      },

      {

        "id": "general3",

        "title": "welcome general3"

      }

    ],

    "second" : [

      {

        "id": "special1",

        "title": "welcome special1"

      },

      {

        "id": "special2",

        "title": "welcome special2"

      },

      {

        "id": "special3",

        "title": "welcome special3"

      }

    ]

  }

 

9. firebase 해당 프로젝트에서 Realtime Database > data 안 오른쪽 상단의 아이콘을 눌러 JSON 를 업로드

 

10. 트리 모양의 데이터가 들어간 것을 확인 

 

 

11. 해당 프로젝트에서 data 호출할 페이지에 아래와 같이 입력.

+++ 참고 : firebase의 Realtime Database는 ref(dbName, path) 함수로 읽고, 

Firestore Database는 doc, collection 함수로 읽는다. 우리는 Realtime Database을 사용하므로 ref 함수로 데이터를 호출할수 있다.

import { ref, child, get } from "firebase/database";

import { firebaseDB } from "../firebase";

import { useEffect } from "react";

function List(){

  const readOne = () => {

    const dbRef = ref(firebaseDB);

    get(child(dbRef, "/WorkList"))

      .then(snapshot => {

      if (snapshot.exists()) {

        console.log(snapshot.val());

      } else {

        console.log("No data available");

      }

    })

      .catch(error => {

      console.error(error);

    });

  };

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

  return (

    <>firebase</>

  )

}

export default List;

useEffect는 react의 Hook으로, 컴포넌트가 렌더링 될 때마다 특정 작업을 실행 할 수 있도록 한다.

만약, 페이지 첫 진입시 한번만 데이터를 호출하고 싶으면, 아래와 같이 두번째 매개변수에 빈 배열[]을 추가해준다.

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

snapshot이란 변수에 데이터를 밀어넣고, 데이터가 존재한다면 snapshot의 value 값인 데이터가 콘솔에 출력 될 것이고,

빈데이터 또는 접근할 수 없으면 "No data available"이 출력될 것이다.

또한 에러가 난다면 catch 함수의 error값이 출력 될 것이다.

 

성공하면 아래와 같이 Object 형태로 출력되는 것을 볼 수 있다.