메달리스트 업데이트 해주기(feat.map,상태업데이트)

 

메달 추가하기 기능은 완료를 하였는데, 업데이트 기능에서 자꾸 절어서 정리가 필요하다고 생각했다.

못생긴 UI는 일단 무시하자. 지금 그게 중요한게 아니다..

 

로직 생각하기

1. 일단 등록하려는 나라이름이 리스트에 등록 되어있는지 확인한다.

2.  등록되어 있다면 메달수를 변경하여주고 > (상태 업데이트를 해준다)

3. 등록되어 있지 않다면 등록먼저(추가하기기능) 하라고 알랏창을 띄어준다.

 

 

1.리스트 배열에서 입력값이 일치 하는 항목을 찾아준다.

const findMedal = medalList.find(function (list) {
  return list.country === country;
});

 

같은 항목이 있으면 해당 객체가 나올것이고, 없으면 undefined 가 뜰것이다.

 

2.조건문

if (findMedal) {
  // ...
} else {
  alert("해당국가를 등록 먼저 해주세요");
}

 

일단 크게 보면 findMedal이 true일때 / false일때로 나눈다.

true일때 : 입력한 국가명이 리스트에 있다는 의미이므로 값을 변경하고 업데이트 해주는 로직을 짜주어야 한다.

false 일때 : 입력한 국가명이 리스트에 없으므로 해당국가를 먼저 등록 해주어야 한다. (alert창 띄워주기.)

 

2-1 true일때 배열 업데이트 하기

내가 제일 헷갈렸던 부분이다..차근차근 해보자

 

실제로 medalList안에는 객체형태가 배열로 감싸져 있다.

그렇기 때문에 이제 배열안에 객체들을 순회하면서 key - country와 입력값 country를 비교해서 같으면 해당 정보를 업데이트 해주어야 한다. 

 

map을 사용해서 순회할수 있다!

const updateMedal = medalList.map((list) => {
    if (list.country === country) {
      return {
        country: country,
        gold: parseInt(gold),
        silver: parseInt(silver),
        bronze: parseInt(bronze),
      };
    } else {
      return list; //같지않을때 조건
    }
});

• map을 돌면서 하나하나의 객체를 list라는 매개변수로 받았다
• 매개변수로 받은 객체의 key값과 입력값을 비교해야하기 때문에 list.country === country
• 위 조건이 일치한다면 새로운 객체를 return 해줄거다. (새로 입력받은 country, gold, silver,bronze)
• 위조건이 일치하지 않는다면, 즉 입력한 값이 리스트에 없다면 원래대로 두어야 하기때문에 map에서 받아온 매개변수 list를 그대로 반환 해주어야 한다. (안그러면 새로받아온거는 수정되지만 원래있던 객체값이 사라짐)

그런다음 변경된 배열을 상태에 반영해야하기 때문에 state함수에 넣어준다.

setMedalList(updateMedal);

 

 

업데이트 기능 전체 로직

const handleUpdate = () => {
    const findMedal = medalList.find(function (list) {
      return list.country === country;
    });
    if (findMedal) {
     //같을값을 맵으로 새로운 배열을 만들어준다
      const updateMedal = medalList.map((list) => {
        if (list.country === country) {
          return {
            country: country,
            gold: parseInt(gold),
            silver: parseInt(silver),
            bronze: parseInt(bronze),
          };
        } else {
          return list; //같지않을때 조건
        }
      });
      setMedalList(updateMedal);
    } else {
      alert("해당국가를 등록 먼저 해주세요");
    }
};