인프런 커뮤니티 질문&답변
작성한 질문수
질문드립니다!
작성
·
223
0
안녕하세요.
강의 너무 잘 듣고 있습니다.
다름이 아니라 메세지 렌더링 부분에 여쭙고 싶은게 있어서요.
MainPanel.js/
addMessageListner 부분입니다
let messagesArray = [];
this.state.messagesRef
.child(chatRoomId)
.on("child_added", (DataSnapshot) => {
console.log("added");
messagesArray.push(DataSnapshot.val());
// this.props.dispatch(setLoadMessges(messagesArray));
this.setState({ messages: messagesArray, messagesLoading: false });
});
제가 생각한 흐름대로라면, 현재 채팅방 1과 2가 있는 상태에서
1. 나는 현재 채팅방 1을 킨 상태이다.
2. 상대방이 채팅방 2에서 채팅을 친다.
3. 'child-added'로 인해 채팅방2의 새 메세지가 messageArray로 push된다.
4. setState로 인해 채팅방 2의 내용으로 리렌더링된다.
5.채팅방 1에 있던 사용자가 채팅방 2로 바뀐 현상이 나타난다.
인데 강사님의 코드를 사용하니 이런 문제가 발생하지 않더라구요.
다만 주석의 코드처럼 따로 리덕스 state에 messges를 만들어서 관리하니까 제가 말한 현상이 발생하구요.
혹시 강사님의 코드가 위의 저 흐름처럼 진행되지 않는 이유를 알 수 있을까요??
귀한 시간 내주셔서 감사합니다
답변 2
0
John Ahn
지식공유자
안녕하세요 !!! 답이 늦었네요. 죄송합니다...
위에서 구준형님이 말씀해주신 것처럼 messagesRef.child(chatRoomId).on("child_added")
로 메시지를 보냈을 때 같은 방에 있는 곳에만 메시지가 전달되서 setState으로
state이 업데이트되기 때문에,
다른 방에 있는 곳에는 setState이 되지 않아서 렌더링이 다시 일어나지 않습니다 ~!
0
child-added 전에 '나'와 '상대방'이 chatRoomId에 따라 다른 방에서 이벤트가 발생하기 때문이 아닐까요? 리덕스는 구조를 잘 모르겠지만, 마찬가지로 위를 고려하지 않고 짜서 그런 것 아닐까요?
틀리면 부끄럽지만, 의견한번 내봅니다..
답변 감사합니다!
제 생각은 이렇습니다.
사용자 A가 'child_added' 리스너를 방마다 달아두었으니 B가 2번방에서 채팅을 쳐서 DB에 메세지가 추가되면 그것을 A가 감지하여 state를 업데이트 하게 되는 것으로 생각했습니다.
리스너를 달아두면 옵저버처럼 옵션으로 넣어준 변화가 감지될 때마다 실행되는 것이 틀린 것일까요..?
헷갈리네요 ㅜㅜ