[side PJ ] ⚾️야구게임 - 문제상황과 해결과정

 

리액트에서의 상태관리는 중요하다는 것을 느끼게 하는 프로젝트였는데,

이번에는  상태관리의 문제로 착각한 경우로 짝궁인 오톰과 함께 3시간을 삽질했다.&0&

 

---

📌문제발생 1

팀을 선택했을 때 선택한 팀의 정보를 setState하여 하위 다른 component에서 사용하려 했으나

데이터가 렌더링 되지 않음

 

 

 

StartScreen안의 handleClickTeam 

const handleClickTeam = async () => {
    let teamId;
    if (type === 'home') {
      teamId = game.homeTeamId;
    } else {
      teamId = game.awayTeamId;
    }
    
    try {
      const { data } = await axios.get(
        `http://13.209.109.186/baseball/games/${game.gameId}/${teamId}`
      );
      const [awayInfo, homeInfo] = [data.awayTeam, data.homeTeam];
      setAwayTeam(awayInfo);
      setHomeTeam(homeInfo);
      homeInfo.userSelected && setIsHome(true);
      history.push('/play-screen');
    } catch {
      setPlayable(false);
    }
    
    if (isHome) {
    setMyTeam(homeTeam.players);
    setMyTeamName(homeTeam.teamName);
    setCounterTeam(awayTeam.players);
    setCounterTeamName(awayTeam.teamName);
   	setIsDefense(isHome);
  } else {
    setMyTeam(awayTeam.players);
    setMyTeamName(awayTeam.teamName);
    setCounterTeam(homeTeam.players);
    setCounterTeamName(homeTeam.teamName);
  }
  };

 

처음에는 hadleClickTeam안에 if(isHome)을 넣어둠

위에서 setIsHome(true)로 인해 바뀐 isHome값으로 if문을 돌것이라 예상했지만

실제로는  저번과 마찬가지로 전의if(isHome)으로 돌기 때문에 

이 component가 렌더링되어버린 후 set이 되었다.

 

+ handleClickTeam은 함수이고 Component가 아니라 리렌더링하는게 없어서 다른곳에다 구현을 하기로 판단.

 

 

 

 

 

상태 세팅이 넘어간 곳은

PlayScreen 

const PlayScreen = (props) => {
  const {
    isHome,
    homeTeam,
    awayTeam,
    setMyTeam,
    setMyTeamName,
    setCounterTeam,
    setCounterTeamName,
  } = useContext(GlobalContext);

  if (isHome) {
    setMyTeam(homeTeam.players);
    setMyTeamName(homeTeam.teamName);
    setCounterTeam(awayTeam.players);
    setCounterTeamName(awayTeam.teamName);
    // setIsDefense(isHome);
  } else {
    setMyTeam(awayTeam.players);
    setMyTeamName(awayTeam.teamName);
    setCounterTeam(homeTeam.players);
    setCounterTeamName(homeTeam.teamName);
  }
  return (
    <PlayScreenDiv>
      <Score />
      <CurrentPlayer />
      <Stadium />
      <LogList />
    </PlayScreenDiv>
  );
};

여기서 useContext로 상태를 가져와 isHome이 true이면 값을 렌더링 해준다.

PlayScreen은 Component이기 때문에 if 조건이 return하기 전에 정상 작동 하게 된다.

 

 

 

---

📌문제발생 2

우측 상단에 현재의 투수 데이터가 렌더링 되지 않았다.

 

 

CurrentPlayer (PlayScreen이 뿌리는 component)

const CurrentPlayer = () => {
  const { isHome, myTeam, counterTeam } = useContext(GlobalContext);
  const myPitcher = myTeam.filter((player) => player.pitcher === true)
  const counterPitcher = counterTeam.filter(
    (player) => player.pitcher === true
  );

여기서 받은 myTeam의 정보를 myPitcher에 뿌려주어야 되는데 나오지 않았다.

우리는 상태관리가 또 잘못된 줄 알며 앞의 올바른 과정들을 바꾸기 시작했다 .

 

PlayScreen안의 if/else를 useEffect로 묶기 -> 결과는 동일했다. 왜냐? useEffect를 하나 안하나 상관 없기 때문

 그외 상태관리에 따른 문제로 판단하고 뒤죽박죽 섞기 시작 

 

하지만 문제는 다른곳이었다 바로 데이터 잘못 지정해서 불러오기 💦

 

해결 

잘못된 부분은 단순한 데이터 가져오기 실수 

const CurrentPlayer = () => {
  const { isHome, myTeam, counterTeam } = useContext(GlobalContext);
  const myPitcher = myTeam.filter((player) => player.pitcher === true)[0];
  const counterPitcher = counterTeam.filter(
    (player) => player.pitcher === true
  )[0];

myTeam의 pitcher가 false인 값을 가져오면 배열이 오게 되는데

배열의 첫번째 요소라는 [0] 표시를 해야했다.

 

 

 

 

 

 

 

📌 optinal chaining

<CurrentPlayerDiv>
      <PlayerTag>PITCHER</PlayerTag>
      <Player>
        {isHome ? (
          <PlayerName>{myPitcher?.name}</PlayerName>
        ) : (
          <PlayerName>{counterPitcher?.name}</PlayerName>
        )}
        {isHome ? (
          <PitcherNum>#{myPitcher?.backNumber}</PitcherNum>
        ) : (
          <PitcherNum>#{counterPitcher?.backNumber}</PitcherNum>
        )}

그리고 뿌려줄때  myPitcher?.name 을 통해 

myPitcher가 null이 아닐 때 뿌려주라는 지정을 한줄로 할 수 있게 되었다.

 

 

 

느낀점 

 

 

 

리액트의 상태관리에 자신이 없어

오류가 발생했을 때  상태관리 때문이라고 단언했다.

조금더 원리에 대한 이해가 필요하고, data의 타입 또한 신경쓰자