당근마켓 chatId 질문입니다!

[허재원]

react에서 당근마켓을 만들고 있습니다. react에선 제이쿼리를 쓰면 현업에서 매우 싫어한다고 해서 
부랴부랴 제이쿼리 대신 바닐라로 연습해보는 중입니다. 거기다 firebase가 9버전으로 바뀌어서 
파이어베이스 소스코드를 다시 뒤져가면서 찾아보고 있는데 난제를 만났습니다. 
chatId를 할당하는 데 계속 undefined가 나옵니다.. 어떻게 해결해야 할까요? 문제의 원인조차
모르겠습니다.. 일단 제꺼하고 애플님꺼 둘 다 코드 올려봅니다. 
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
var chatId;
db.collection('chatroom')
    .where('who', 'array-contains', 내uid).get()
    .then((result)=>{ result.forEach((a)=>{ 
           var template = `<li class="list-group-item"> 
           <h6>${a.data().product}</h6> <h6 class="text-small">${a.id}</h6> </li>` 

$('.chat-list').append(template)
$('.list-group-item').click(function(){ 
var 채팅방id = $(this).children('.text-small').text() });
 })
 })

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
여기서부턴 제가 변환한 코드입니다. chatId가 자꾸 클릭해도 undefined라고 뜨는데 어떻게 해야 할까요ㅠㅠ
    chatId = document.getElementsByClassName("text-small")[i].innerText; 이부분에서 배열도 빼보고
innerText를 textContent로도 바꿔보고 했는데도 안됩니다.. 조언 해주시면 감사하겠습니다..!
chatId 뺴고 alert()찍어봤을 때는 alert가 떴습니다. eventlistener는 등록됐는데 왜 chatId 값을 못받아올까요...
Cannot read properties of undefined (reading 'innerText') 오류가 뜹니다!


let chatId;

 const q = query(
            collection(db, `chatroom`),
            where('who', 'array-contains', sessionStorage.getItem('uid')),
            limit(100)
        );

        onSnapshot(q, (snapshot) => {

            snapshot.forEach((doc) => {
                const li = document.createElement('li');

                li.className = 'list-group-item';

                li.innerHTML = `
                <h6>${sessionStorage.getItem('uid') === doc.data().who[0] ?
                        doc.data().who[1]
                        :
                        doc.data().who[0]}</h6>
                        <p class='text-small'>${doc.id}</p>
                `;

                document.getElementsByClassName('list-group chat-list')[0].appendChild(li);

                for (let i = 0; i < document.getElementsByClassName('list-group-item').length; ++i) {
                    document.getElementsByClassName('list-group-item')[i].addEventListener("click", function () {
                        chatId = document.getElementsByClassName("text-small")[i].innerText;
                    })
                }
             

            });
        });

[허재원]

chatId를 임의로 'abc'설정하고서 클릭 event발생시키면 받아와지네요. 왜 이런 차이가 나는지는 모르겠지만 아마 rendering하면서 새로 값을 받은 거 같습니다. 어쨌든 해결했습니다!

[허재원]

선생님.. 버그가 하나 생겨서 질문드려봅니다.. 
제가 저 채팅방(list-group-item)을 누르면 똑같은 채팅방을 보여주는 게 한개 더 생겨버립니다.
코드는 위와 동일합니다.
이 문제를 어떻게 해결해야 할까요 ㅠㅠ 

[codingapple]

이미 같은 id들을 가진 채팅방이 DB에 있으면 만들지 말라고 코드를 짜면 되겠군요

[허재원]

힌트를 받아서 해결했습니다! 조금 다른 방식이긴 한데 chatId의 초기값이 있고, 이후 클릭 시 
chatId는 doc.id와 다른 경우로 하니까 되네요. DB에서 가져오는 방법을 몰라서 이렇게 그냥 해결했습니다. 
감사합니다!!!

    const [chatId, setChatId] = useState('unde');

  snapshot.forEach((doc) => {
                const li = document.createElement('li');

                li.className = 'list-group-item';

                li.innerHTML = `
                <h6>${sessionStorage.getItem('uid') === doc.data().who[0] ?
                        doc.data().who[1]
                        :
                        doc.data().who[0]}</h6>
                        <p class='text-small'>${doc.id}</p>
                `;
                if ((doc.id!==chatId) && (chatId.includes('unde'))) {
                    document.getElementsByClassName('list-group chat-list')[0].append(li);
                }
            });

[글쓴이]

글