IceCraft - 마피아 게임페이지 모달 추가 : Object.entries

 

[Feat#240] - 마피아게임페이지 최종투표 결과값 모달 추가 by seokachu · Pull Request #245 · ice-craft/ice-cra

 

 

마피아 게임 테스트를 진행했었는데, 

마피아 의심 유저 투표를 진행하고 난뒤 현재 유저가 투표한 내용의 결과를 보여주는 모달창이 부족하여 

투표에 대한 결과값 모달을 추가로 만들게 되었다.

그래서 마피아 의심 유저 투표시 투표시 결과값 나오는 모달을 추가하였다.

const [voteResults, setVoteResults] = useState<VoteResults>({});
 const socketArr = [
    {
      eventName: "showVoteResult",
      handler: (data: VoteResults) => {
        console.log("showVoteResult Event Message", data);
        setVoteResults(data);
      }
    }
  ];

 

 

서버와 연동하는 socket.io를 커스텀 훅으로 만드는 리팩토링을 진행하였는데,

socket.io 커스텀훅으로 변경한 로직에 대한 내용과 함께

UI창 결과값을 추가하게 되었다.

   <>
      <div className={S.modalWrap}>
        <div className={S.modal}>
          <div>
            <h1>마피아 의심 투표 결과</h1>
            <ul>
              {Object.entries(voteResults).map(([nickname, voteCount]) => (
                <li key={nickname}>
                  <span>{nickname}</span> &rarr; {voteCount}
                </li>
              ))}
            </ul>
            <progress className={S.progress} value={(timer * 10 - count) * (100 / (timer * 10))} max={100}></progress>
          </div>
        </div>
      </div>
    </>

 

 

 

트러블슈팅 내용

서버에서 이미 객체로 { nickname: voteCount } 형태로 받아오고 있어서 map함수를 이용하여 뿌려주고 있었다.
하지만 전달받은 객체를 그대로 map으로 순회할 수 없기 때문에 Object.entries가 필요했다.
따라서 객체 자체는 반복 가능한 데이터 구조가 아니므로
객체의 key-value쌍을 배열 형태로 변환하여 순회해야했다.
결론은 Object.entries를 사용하여 서버에서 전달받은 값을 넣어주게 되었다. 

<ul>
  {Object.entries(voteResults).map(([nickname, voteCount]) => (
    <li key={nickname}>
      <span>{nickname}</span> &rarr; {voteCount}
    </li>
  ))}
</ul>

 

 

Object.entries

Object.keys(obj) – 객체의 키만 담은 배열을 반환
Object.values(obj) – 객체의 값만 담은 배열을 반환
Object.entries(obj) – [키, 값] 쌍을 담은 배열을 반환

Object.keys, values, entries