팀 프로젝트 - 모달 후보 교체 로직 에러 수정완료!

이전

오늘 종강을 했다

지금까지 시험기간이어서 많이 개발을 하지 못했지만 조금씩이라도 했다

오늘 시험이 다 끝나서 해결이 안되고있던 에러를 다시 수정해봤다

기배치된 선수와 모달에 있는 후보선수를 교체했을 경우 모달에 있는 후보에도 변화가 일어나야 한다

기배치된 선수는 모달에 나와야 하며 선택된 선수는 모달에서 사라져야 한다

1번 선수를 모달과 변경했다고 가정해보자

1번 선수를 변경한 후 다시 1번 선수에서 우클릭을 하면 제대로 변경된 상태로 나왔다

근데 1번 선수를 변경한 후 다른 선수에서 우클릭으로 후보리스트를 띄우면

선택된 후보가 리스트에서 사라지지 않는 에러가 있었다

그렇게 후보가 남아있는 상태에서 1번 선수한테 우클릭을 하면 정상적으로 수정되었다

그러니까 어떻게 보면 해당 선수를 다시한번 우클릭을 해야 업데이트가 되는 꼴이었다

도대체 이유를 알 수가 없었다

수정

우선 현재 말판에 선수를 띄우는 로직을 먼저 설명해야한다

포메이션용 메인 파일이 하나 있고 선수카드용 파일이 따로있다

그래서 메인 파일에서 받은 선수 정보를 선수카드 컴포넌트에 보내야 한다

이렇게 했을 때 문제점은 예전에 짯던 코드처럼 하나의 파일에서 선수 관리가 되지 않는 것이다

선수카드 파일에 모달을 띄우는 로직이 있는데 그렇게 되면 메인에 있는 선수state와 별개의

선수용 변수를 만들어야 했다

선수를 한번에 배열로 보내는 것이 아닌 한명씩 담아서 보내기 때문에

플레이어용 파일에 Setstate 함수를 두면 hook error가 발생한다

그래서 state로 관리하지 않고 배열로 후보인 애들을 담아주었다

전역 변수로 배열을 만들고 already(선발인지 아닌지)가 false인 애들을 담아주었다

이미 이렇게 후보를 교체하면 모달에 교체된 선수를 띄우고 사라지게 하는 로직을

만들어봤던 터라 간단하게 할 수 있을 줄 알았다

모달에서 아이템이 클릭될 때 해당 id와 같은 값을 지닌 값을 필터링하고

기배치된 선수의 id값을 이용해서 already를 false로 바꾸었다

그러나 기배치된 선수는 잘 사라지지만 후보에 있는 값이 사라지지 않았다

아무리봐도 코드에는 문제가 없었다

              <MenuItem
                onClick={(e) => {
                  handleClose()
                  modalidsend(player._id)
                }}
                key={player._id}
              >
                {player.name}
                {player.like}
              </MenuItem>

이 메뉴아이템 코드는 모달의 각 item에 관련된 것이다

modalidsend에서 id값을 받기 때문에 저기에다가 걸어 주었다

fal = fal.filter(item => item._id !== id)

그러나 제대로 작동을 하지 않았다

그래서 혹시나 해서 따로 함수를 만들어서 onClick에 걸어보았다

              <MenuItem
                onClick={(e) => {
                  handleClose()
                  modalidsend(player._id)
                  remove(player._id)
                }}
                key={player._id}
              >
                {player.name}
                {player.like}
              </MenuItem>
-------------------------------------------------
    const remove = (id) => {
    fal = fal.filter(item => item._id !== id)
  }

그랬더니 제대로 교체가 되었다!!!

도대체 왜 함수를 따로 만들지 않았을 때는 동작을 하지 않았는지 모르겠지만

그래도 수정이 되었다

이유를 알게되면 다시 이곳에 올리도록 하겠다