Open chaeeunj opened 9 months ago
해결 시도1
제대로 전송된 채팅들은 contents 값을 가지고 있기 때문에 조건문을 사용해서 contents 값이 있을 때만 ChatBox를 렌더링 하도록 코드를 수정했습니다.
messageLists.map(
(message) =>
message.contents && (
<ChatBox key={message.contents}>
<span>{message.nickname}</span> {message.contents}
</ChatBox>
),
)}
결과적으로 이전처럼 빈 ChatBox가 렌더링되는 문제는 발생하지 않지만 올바른 해결 방식이 맞는지 의문이 듭니다.
조건부 렌더링으로 오류를 해결하는 것이 아니라 처음부터 전송한 채팅만을 messageLists 배열에 저장하는 방법이 무엇인지 고민하고 있습니다.
(아래 사진과 같은 코드는 저장되지 않고)
const Chat = ({ postId }) => { const [message, setMessage] = useState(''); const [messageLists, setMessageLists] = useState([]); const stompClient = useRef(null);
const userInfo = JSON.parse(window.localStorage.getItem('userInfo')); const USER_TOKEN = userInfo.accessToken;
useEffect(() => { const websocket = new WebSocket(
ws://13.124.61.246:8080/ws-stomp
); stompClient.current = new Stomp.Client({ webSocketFactory: () => websocket, connectHeaders: { 'X-AUTH-TOKEN': USER_TOKEN, }, debug: function (str) { console.log(str); }, });}, [postId, USER_TOKEN]);
const handleMessageChange = (e) => { setMessage(e.target.value); };
const sendMessage = () => { if (message.trim() === '') return; if (stompClient.current && stompClient.current.connected) { const newMessage = { contents: message, }; stompClient.current.publish({ destination:
/pub/chat/${postId}
, body: JSON.stringify(newMessage.contents), });};
const displayMessage = (message) => { setMessageLists((prevMessageLists) => [...prevMessageLists, message]); };
return (
); };
Chat.propTypes = { postId: PropTypes.string.isRequired, accessToken: PropTypes.string, };
export default Chat;
const ChatBox = styled.div
width: fit-content; padding: 15px; background-color: ${({ theme }) => theme.linen}; margin-bottom: 20px;
;해당 코드는 Chat 컴포넌트의 31번째 줄에 위치하고 있는데, 콘솔창을 확인해보면 채팅 전송 시![image](https://github.com/devcisive/solumon-frontend/assets/72565344/f8605734-f427-46c9-addc-2b99af8d6416)
console.log(newMessage);
코드가 2번 실행됐음을 알 수 있습니다.사진과 같이 첫 번째에는 입력한 채팅이 콘솔창에 그대로 출력되는데, 두 번째에는 채팅 전달 상태와 관련되어 보이는 코드가 출력되는 것을 확인했습니다.
그리고 누적된 채팅 목록들을 확인하기 위해
messageLists배열에는 채팅 목록들만 담겨있어야 하는데
console.log(messageLists);
코드를 실행하면 아래와 같은 결과가 출력되는 것을 확인했습니다.