채팅 리스트에 대한 고충

껍데기 디자인을 완성하고 나서 활성화된 채팅창을 표시하는 것과 그에 따른 채팅메세지를 어떻게 불러올 지 고민이었다.

 

클릭한 리스트를 active상태로 만들고 싶었고, 클릭된 리스트를 제외한 다른 list는 활성화 되지 않은 상태로 놔두는 게 문제였다. 또, 다른 리스트가 active상태가 되면 기존에 활성화된 active는 사라져야했다. 배열로 만들면 좋겠다 싶었는데 구글링해서 해답을 찾아내어 문제를 해결했다.

 

액티브된 채팅 리스트에 해당하는 채팅메세지를 불러오려고 setmessage도 설정해줬다. 하나의 함수에서 2개의 다른 영역에 일을 시키는게 조금 냄새가 난다고 해야하나..이정도는 괜찮나..싶지만 일단은 기능 구현이 먼저니 넘어가기로 한다.

 

    const changeActive = (index) => {

        const newArray = Array(chatData.lists.length).fill(false);

        newArray[index] = true;

        setMessage(chatData.lists[index].listMsg);

        setActive(newArray);

        console.log(chatData.lists[index].listMsg)

    }

이런 소스코드로 수정했다. 

역시 코딩을 하면서 머릿속으로 생각해낸 내용을 구현해내는 쾌감이 정말 짜릿하다.

프로젝트를 만들면서 굉장히 막막했지만, 강의를 들을 때와는 완전히 새로운 재미가 있다.

현재까지 완성한 UI로 글을 마무리한다.