Firebase로 실시간 데이터베이스 구현하기
이제 실시간 데이터베이스를 구현할 차례이다.
Firebase 문서를 보니 …..오브젝트였다..
이게 무슨말이냐하면.. 위에 보면 기본 쓰기 작업은 set()을 이용해서 저장할 수 있다고 한다. 그 아래 코드를 보니 .set({ ... }) 오브젝트였다.
지금까지 나는 배열로 만들어서 작업을 해왔는데 😵
이렇게 말이다
이를 오브젝트로 바꾸기 대공사를 진행하였다.
바꿨더니 바로 만날 수 있는 오류
오브젝트에서는 map()을 쓸 수 없다.
하지만 Object.keys(obj) 를 이용하면 오브젝트의 키만 담은 배열을 리턴하기 때문에 map()을 쓸 수 있다.
그리하여 MovieCard 컴포넌트에 movies를 넘겨줄 수 있다.
MovieCard 컴포넌트에서 콘솔을 찍어보니 이처럼 나왔다.
구조분해할당을 해줌으로써 MovieDetail 컴포넌트로 넘겨줄 수 있다.
위의 문서를 토대로 데이터베이스만 담당하는 클래스를 만들어준다.
각 아이디별로 데이터를 관리하기 때문에 아이디/movies/movie.id로 하여 .set()에 받아온 데이터를 넣어준다.
삭제는 문서처럼 참조에 remove()를 호출하여 주면 된다.
하지만 이렇게 하고나니 firebase에는 데이터가 저장되는데 페이지에는 나타나지 않았다.
문서에 보면 on()을 통하여 데이터를 읽을 수 있으며, 콜백함수는 snapshot을 전달해주고 snapshot의 val()에 데이터가 들어가 있다.
그리하여 데이터가 있다면 onUpdate함수에 데이터를 넣어준다.
이 함수는 컴포넌트가 마운트되었을 때 데이터를 받아오고 싶기 때문에 useEffect를 통해서 이를 실행할 수 있다.
snapshotMovie에 userId를 전달해주고, movies를 받아오면 setMovies를 통해 state를 업데이트해줄 수 있다. 그리고 useEffect는 userId가 변경될 때마다 실행해준다.