firebase를 컴포넌트로 바로 불러와서 map으로 화면에 뿌려줄 때는
페이지가 뜨자마자 바로 작동했는데,
redux에 firebase 데이터를 저장하고
redux store에서 데이터를 불러와서 사용하는 방식으로 바꾸고 난 뒤
리렌더링이 일어나지 않으면 화면에 firebase에서 불러온 데이터가 나타나지 않는 현상이 발생했다.
리렌더링을 일으키면 데이터가 화면에 뿌려진다는 것을 확인하기 위해서
state를 하나 생성해서 setState를 일으키는 버튼을 만들어보았다.
const PostList = () => {
const posts = useSelector((state) => state.posts);
const [num, setNum] = useState(0);
console.log(posts);
return (
<div>
<h2>게시물</h2>
<button
onClick={() => {
setNum(num + 1);
}}
>
+
</button>
{posts.map((post) => {
return <PostItem key={post.id} post={post}></PostItem>;
})}
</div>
);
};버튼을 누르면 num이라는 state가 변경되고,
화면에 PostItem이 뿌려진다.
아무래도 데이터베이스를 받아오는 과정이 비동기적이라 그런 것으로 추측이 된다...
그렇게 추측하는 이유는..
글을 작성하는 기능을 만들었는데,
firebase에는 바로 데이터가 저장이 되지만,
console에 찍으면 promise객체로 확인되기 때문이다...
