[Today's Bug] Each child in a list should have a unique "key" prop.

📢 이 버그 좀 보세요!

실행은 또 잘 된다 . . .

배열로 된 데이터를 map을 이용해서 뿌려줄 때 위와 같은 오류가 났다.

 

🐞 버그가 나타난 이유?

map으로 데이터를 뿌려주는데 unique한 키값이 없어서 나는 오류이다. 맵 리스트 데이터는 고유한 키값이 꼭 있어야 한다.

 

🕸 어떻게 이 버그를 잡을까?

당연 키값을 만들어주면 된다. firestore의 document의 id를 배열에 추가해주었다.

    const fetchCard = async () => {
        const database = getFirestore(firebase);  //정보가 올바르면 아래 파이어스토어 접근
        const q = query(collection(database, "users/SUE3vmEn1CixjZiBBxZZ/greetings"))
        getDocs(q).then((querySnapshot) => {
            querySnapshot.forEach((doc) => {
                setCard(cards => [...cards, {...doc.data(), id: doc.id}]);

            })
        })
    }

이 다음에 본문의 html element내에 key값을 넣어주었다.

cards.map(c => {
                            return (
                                <Card key={c.id}>
                                    <CardActionArea>
                                        <CardContent className="card_content">
                                            <Typography gutterBottom variant="h5" component="div">
                                                {c.grt_title}
                                            </Typography>
                                            <Typography variant="body2" color="text.secondary">
                                                {c.grt_contents}
                                            </Typography>
                                        </CardContent>
                                    </CardActionArea>
                                </Card>
                            )
                        })