[메달 집계 관리] - return했는데도 왜 메달 리스트를 보여주는걸까

문제 상황

요구 사항

사용자가 이미 등록된 나라를 입력하려고 할 때 경고창을 띄우고, 해당 나라를 추가하지 마세요.

medalList.forEach((country) => {
  const { countryName } = country;
  if (countryName.includes(newCountry)) {
    alert("이미 존재하는 나라입니다.");
    return;
  }
});

사용자가 입력한 나라가 이미 리스트에 존재할 때,

"이미 존재하는 나라입니다."라는 경고창을 띄우는 코드를 짰다.

 

🚨 마지막에 return까지 넣어 줬는데도, 리스트에 추가되는 문제가 발생하였다.

 

 

문제 원인

✅ forEach 메서드를 통해서는 함수 전체의 실행을 막을 수가 없다.

forEach의 콜백 함수 내에서 return 하는 것은 콜백 함수의 실행을 멈추는 것 밖에 하지 못한다.

그렇기 때문에 메달 리스트를 추가하는 함수의 실행이 멈추지 않는 것이었다.

 

 

해결 과정

✅ forEach 대신에 some 메서드를 이용하였다.

const checkDuplication = medalList.some((country) => {
  const { countryName } = country;
  return countryName.includes(newCountry);
});

사용자가 입력한 나라가 이미 메달리스트 안에 존재하고 있다면 checkDuplication의 값은 true가 된다.

 

if (checkDuplication) {
  alert("이미 존재하는 나라입니다.");
  return;
}

조건문을 이용하여 해당 값이 true일 경우, 경고창을 띄운 뒤에 return을 한다.

이렇게 코드를 작성하면 함수 전체의 실행이 멈추게 된다.

 

 

전체 코드

// form 관리 함수
const submitHandler = (e) => {
  e.preventDefault();

  // 예외 상황 처리 1: 입력값이 없을 때
  if (
    newCountry === "" ||
    goldMedal === "" ||
    silverMedal === "" ||
    bronzeMedal === ""
  ) {
    alert("값을 모두 입력하세요.");
    return;
  }

  // 예외 상황 처리 2: 이미 추가된 나라일 때
  const checkDuplication = medalList.some((country) => {
    const { countryName } = country;
    return countryName.includes(newCountry);
  });
  if (checkDuplication) {
    alert("이미 존재하는 나라입니다.");
    return;
  }

  // medalList state 변환
  const newMedalList = [
    ...medalList,
    {
      countryName: newCountry,
      goldMedal: goldMedal,
      silverMedal: silverMedal,
      bronzeMedal: bronzeMedal,
    },
  ];

  setMedalList(
    newMedalList.sort((a, b) => {
      return b.goldMedal - a.goldMedal;
    })
  );

  // 입력값 초기화
  setNewCountry("");
  setGoldMedal("");
  setSilverMedal("");
  setBronzeMedal("");
};

 

 

결과

이전과 다르게 경고창이 나온 뒤에 리스트가 추가되지 않는 모습을 확인할 수 있다.