TIL_220604_리액트 돔, 파이어베이스 버전 차이

새롭게 리액트 프로젝트 공부를 시작하면서 이미 작성된 프로젝트를 가져와 실행을 시켜보고 있다. 그러던 도중 생기는 문제점이, 예전 프로젝트를 최신 버전 라이브러리에서 동작시키려 하니 문법 오류가 발생했다.

[react-router-dom] v5에서 v6로 변경되면서 주로 문제가 된게 Switch 구문이었다 <Switch>는 <Routes>로 변경되었고, 정확한 위치를 지정하는 exact 구문이 사라졌다. 또한 component 속성이 element로 변경 되었다. 이전에는 단순히 지정할 텍스트만 입력이 된거 같은데, 현재는 <텍스트> 형태로 지정을 해야한다.

다음으로는 useHistory -> useNavigate로 변경이 되었다. 크게 바뀐건 아니지만, 처음 배우는거다 보니 오류가 발생하면 잘 따라가지를 못하고 있다.

[firebase] 파이어베이스는 8에서 9로 변경되면서 다양한 점이 바뀐것 같다. 시작에 config 부분에서도 가져오는 패키지 자체가 달라졌다

// Version 8
import firebase from 'firebase/app'
import 'firebase/firestore'

const firebaseConfig = {
  // ...
}

firebase.initializeApp(firebaseConfig)

const db = firebase.firestore()

// Version 9
import { initializeApp } from 'firebase/app'
import { getFirestore } from 'firebase/firestore'

const firebaseConfig = {
  // ...
}

const app = initializeApp(firebaseConfig)

const db = getFirestore(app)

또한 데이터 CRUD 관련 구문이 바뀌었다.

// version 8
db.collection('users')
  .get()
  .then((querySnapshot) => {
    querySnapshot.forEach((doc) => {
      console.log(`${doc.id} => ${doc.data()}`)
    })
  })

// version 9
import { collection, getDocs } from 'firebase/firestore'

const querySnapshot = await getDocs(collection(db, 'users'))
querySnapshot.forEach((doc) => {
  console.log(`${doc.id} => ${doc.data()}`)
})

이상한 점은 버전9 에서 forEach를 바로 사용했지만 내가 적용 할때는 .then을 통해 한번 펼쳐주고 사용을 했어야했다. await 때문인지는 모르겠지만 좀더 파보면 알게 될 것 같다.