[리액트네이티브] react-native firebase firestore 데이터 읽기

일단은 firebase와 연동 했던 부분의

​

코드를 가져와야겠죠?

​

firebaseConfig.js에 내 데이터베이스와 연동 되어 있을 것이다

 

import { db } from './firebaseConfig';

그리고 해당 데이터 베이스에 있는 값을 읽어 와야할 것이다

 

//firestor 연동
  const [users, setUsers] = useState();
  const readfromDB = async () => {
    try {
      const data = await getDocs(collection(db, "Station")) 
      setUsers(data.docs.map(doc => ({ ...doc.data(), id: doc.id })))
      users?.map((row, idx) => {
        console.log('row'+idx,row)
      })
      console.log('data', data.docs.map)
    } catch (error) {
      console.log('eerror', error.message)
    }
  }

위 코드 처럼 실행해주면 알 수 있다

​

​

아래는 데이터 베이스에 어떻게 저장되어 있는지 확인해보쟈

 

즉 코드를 하나하나 뜯어보면

​

​

data는 fire base firestore의 DB 를 읽어오는데 DB이름이 station이어야할 것이다

​

그리고 읽은 데이터베이스에 있는 값들을

 

map으로 돌려서 값을 복사하여 setUsers로 저장한다

​

그러면 users값에 저장되어 있겠죠???

​

나머지는 예외처리값

 

users?.map((row, idx) => {
        console.log('row'+idx,row)
      })

 

이코드는 값이 뭐가 들어 있는 지 확인하고 싶어서 출력한 값임

​

여기에서

​

"?" 는 무엇인가?!

​

=> users라는 값이 있는지 확인한 다름에 map을 돌리는 것이다(아마도...?)

​

​

아무튼 이렇게 값을 저장함!!!

​

​

그다음에 해당하는 값들을 출력하고 싶고 활용하고 싶다

​

하면

​

나는 데이터가 출력되는 방식을 먼저 파악했다

​

​

출력값을 보면

row0 {"a_date": "23.03.20", "a_id": "admin1", "a_name": "admin1", "a_phone": "010-1111-1111", "a_pw": "4321", "id": "Admin"}

row1 {"id": "Station", "s_count": 9, "s_num": "station1", "s_open": false, "s_position_x": 1, "s_position_y": 1, "s_state": false}

ow2 {"id": "User", "u_date": "23.03.20", "u_id": "user1", "u_name": "user1", "u_phone": "010-0000-0000", "u_position_x": 0, "u_position_y": 0, "u_pw": "1234", "u_rent": false}

 

 

이렇게 값이 나와있다ㅏ

​

row값은 모든 데이터 베이스에 있는 값들을 읽어오기 때문에

값을 하나하나 정제해줘야함

​

그래서 내가 필요한 값은 station의 위치값이니까

​

​

정제해줘야 한다

​

그래서 return 코드 내에[

{
                    users?.map((row, idx) => {
                      return (
                        <>
                          <Text>user - {idx}</Text>
                          <Text>{row.id}</Text>
                          <Text>{row.age}</Text>
                          <Text>{row.createA}</Text>
                        </>
                      )
                    })
                  }

 

위 코드를 삽입하였다

​

map을 돌리는 데 row, idx값을 지정해준다

​

그러면 row는 map의 데이터 하나하나를 말하고

idx 는 말 그대로 index값이다

​

​

그러면 출력되는 것은

이렇게 결과값이 나온다

​

근데 이상한점이 있을건데

​

text값은 4개인데

하나씩 밖에 안나온거 같다

​

id, age, createA인데

id만 나온것임

​

결국에 ㅇdictionary로 저장되어 있는데

값의 key값이 일치하지 않기 때문에 출력이 안된거임

​

​

출력되는 값을 모두 확인하고 파악한 뒤에 출력하게 되면

​

다른 내용이긴 하지만

​

데이터베이스에 저장되어 있는 스테이션의 위치값과

해당 데이터를 출력한 내용이다

​

저번 프로젝트때 진행했던 거라서 코드만 다시 해석하고 적용하면 된다

​

후다닥 빨리 끝내서 station 제작까지 해야겠다ㅏ

​

나는 사용자 모드라 깔끔하게 예외처리도 완료 해야함!!!!

​

관리자 모드에서

스테이션 위치 저장하는 값까지

​

데이터베이스에

역지오로케이션으로 주소값까지 저장하도록 해야겠다!!

​

일단 하루에 3시간씩 코딩하고 공부해야함

​

근로 끝나고 6시 ~ 9시 반까지 랩실에서 구현

​

일단 파이팅,,,,