chat 어플리케이션을 만들면서 한 User의 연속 채팅일 때는 프로필을 첫 채팅에만 보이려고 한다.

연속 채팅이라면 프로필 하나에 채팅 여러개

그래서 [ responseMsg, responseMsg, responseMsg ... ] 를

[[ responseMsg, responseMsg ], [responseMsg, responseMsg responseMsg ...]] 이런 형태로 바꿔야 한다.

앞의 메세지 주인과 뒤의 메세지 주인이 같다면 한 배열에 있도록

 

자기 앞 인덱스의 상태를 기억하고 있어야 하기에 누산기인 reduce가 생각났다.


  
useEffect(() => {
if (msgArr.length != 0) {
const resArr: responseMsgDto[][] = [];
let cacheArr: responseMsgDto[] = [];
if (msgArr.length == 1) resArr.push(msgArr); //수정
msgArr.reduce((acc, cur, idx) => {
if (cacheArr.length == 0) cacheArr = [acc];
if (acc.userId != cur.userId) {
resArr.push(cacheArr);
cacheArr = [];
}
cacheArr.push(cur);
if (idx == msgArr.length - 1) {
resArr.push(cacheArr);
}
return cur;
});
// console.log(resArr);
setReMsgArr(resArr);
}
}, [msgArr])

reduce return으로 결과를 떨어지게 할까 하다가 복잡해보여서 그냥 밖으로 arr 뺐다.

 

중간은 user 동일하면 cacheArr 쌓고 다르면 cacheArr 를 resArr에 담고 cacheArr 비운다.

맨 처음은 cacheArr에 첫 원소가 안들어가 있으므로 [ acc ]으로 시작

맨 마지막은 cacheArr에 쌓여있는 마지막 원소 resArr에 담기

 

수정 )

reduce는 arr length가 1이면 callback을 거치지 않고 그냥 acc 값 반환하고 끝난다.