Inflearn Community Q&A

숫자야구 파트에서 배운 것을 응용해서 가위바위보에서 전적을 기록하게 하려고 시도했습니다.

클래스로 컴포넌트를 작성한 경우에는 제대로 작동하는 것을 확인했으나 Hooks로 변경하고 나서는 제대로 작동하지 않아 질문 드립니다. 

state에 history라는 배열을 만들어 준 후 가위바위보의 결과를 승리/무승부/패배로 배열에 추가하도록 했습니다. map으로 history 배열을 순회하면서 전적을 출력하도록 하고싶었는데 

위와 같이 공백이 출력됩니다. 코드에서 어떤 부분을 검토하면 좋을까요?

const onClickBtn = (choice) => () => {
    clearInterval(interval.current);
    const myScore = scores[choice];
    const cpuScore = scores[computerChoice(imgCoord)];
    const diff = myScore - cpuScore;
    if ( diff === 0 ){
      setResult('비겼습니다');
      setHistory((prevHistory) => {
        return [...prevHistory, '무승부'];
      })
    } else if ([-1, 2].includes(diff)) {
      setResult('이겼습니다');
      setScore((prevScore) => prevScore + 1);
      setHistory((prevHistory) => {
        return [...prevHistory, '승리'];
      });
    } else {
      setResult('졌습니다');
      setScore((prevScore) =>  prevScore - 1);
      setHistory((prevHistory) => {
        return [...prevHistory, '패배'];
      });
    }
    setTimeout(()=> {
      interval.current = setInterval(changeHand, 100);
    }, 2000);
  };

 

<ul>
          {history.map((v, i) => {
              return (
                <Try key={`${i + 1}차 시도:`} tryInfo={v} /> // html의 attribute와 유사한 역할을 하는 props
              )
          })}
</ul>

const Try = memo(({ TryInfo }) => {
  return (
      <li>{ TryInfo }</li>    
  )
})