230823 sandbird react uikit으로 사용하기

0823 sandbird react uikit으로 사용하기

웹 사이트에 1:1 채팅 기능을 추가하기 위해서 sandbird 서비스를 이용했다.
sandbird에서는 react UIKit을 제공하여 쉽게 시작할 수 있었다.

 

UIKit으로 react에서 시작하기

sendbird에서는 react에서 채팅 서비스를 만들기 위한 UIKit과 함께 튜토리얼을 제공한다.

React chat tutorial: How to build a chat app UI | Chat UI in 3 easy steps

	function App() {
	  const [currentChannelUrl, setCurrentChannelUrl] = useState('');
	  return (
	    <div className="App">
	      <SendBirdProvider appId={APP_ID} userId={USER_ID}>
	        <>
	          <Channel channelUrl={currentChannelUrl} />
	          <ChannelList
	            onChannelSelect={(channel) => {
	              if (channel?.url) {
	                setCurrentChannelUrl(channel.url);
	              }
	            }}
	          />
	        </>
	      </SendBirdProvider>
	    </div>
	  );
	}

 

 

채팅이 없는 채팅방이 안뜨는 문제 해결하기

위와 같이 채널과 채널 리스트를 구현했을 때 문제가 발생했다.

자바스크립트 API로 채팅방을 만들면, 채널 리스트 컴포넌트에서 채팅방이 떠야 하는데,

채팅이 없어서 채팅이 뜨지 않았다.

비어있는 채팅방이 뜨기 위해서는 queries에 channelListQuery르 사용하여 아래와 같이 설정해야 했다.

<ChannelList
    ...
    queries={{
        channelListQuery: {
        	includeEmpty: true
        }
    }}
/>

 

채널 리스트에서 채널을 클릭해도 상태가 안변하는 문제

위와 같이 queries를 넣었을때 또 다른 문제가 발생했다.

채널리스트에서 채널을 선택해도 선택된 상태로 바뀌지가 않았다.

queries 부분은 아무 문제가 없어 보였는데, 하나씩 확인해보니 결국 queries가 문제였다

queries로 인해서 채널리스트에서 채널을 선택했을때 채널 리스트가 깜빡이면서 리렌더링이 되었다.

해결하기 위해서는 조금 이상하지만 useState를 이용해 값을 관리해야 했다.

상수인데 굳이 useState를 사용해야 한다는 게 이상하게 느껴진다.

const [queries] = useState({
    channelListQuery: {
    	includeEmpty: true,
    	order: 'latest_last_message',
    }
});

<ChannelList
    ...
    queries={queries}
/>