채팅 - Array.prototype.reduce()

이 글은 Tistory에서 이전된 포스팅입니다. 원본은 여기에서 확인할 수 있습니다.

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 값 반환하고 끝난다.