FACTS(사실, 객관) : 내가 한 일
하나 수정하면 다른쪽에서 삐끗하고
하나 수정하면 갑자기 화면이 사라지고
추가하고 수정까지 마쳤고 삭제를 할 차례인데
//리스트삭제
const handleDeleteCountry = (id) =>{
const filteringCountries = countries.filter(function(country){
return country.id != id
});
console.log(filteringCountries);
};강의를 보면서 어찌저찌 짜긴했는데 console.log에 삭제되는 객체가 찍히는게 아니라 삭제되고 남은 객체가 찍힘..
질문하니 이게 원래 맞고, 삭제되고 남은 객체를 set~~를 통해 화면에 다시 뿌려줘야 한다는 것
그래서 바로 아래에
setCountries(filteringCountries);한 줄 추가해서 완성함.
필수 기능 구현은 마쳤는데 이제 검증이 잘 안됨
1. 만약 국가명을 입력하지 않았을 때
"국가명을 입력하세요" 와 함께 메달 갯수를 몇개를 적었던 추가되면 안됨. =>해결!
even.preventDefault(); < 함수 맨 밑에 작성해서 코드가 아무것도 담지 않은채로 그냥 새로고침 됐음
이 코드는 항상 위에 있어야 하며, 위치를 바꾸니 정상적으로 작동됨!
2. 만약 중복된 국가명을 입력했을 때
"이미 존재하는 국가명입니다" 뜨면서 추가가 안됨
filter()함수를 쓰거나 find()함수를 쓸 수 있다고 하셨음 =>find함수로 해결!
let duplicateCountry = countries.find(function(c) {
return c.country === country;
});
if(duplicateCountry){
alert("국가명이 중복됨");
return
}
3. 만약 수정시, 해당 국가가 없을 때
"해당 국가가 없습니다"와 함께 수정이 되지 않음 => 해결!
const targetCountry = countries.find(function(c){
if (c.country === country){
return true
}else{
return alert("해당국가가 없습니다!")
}4. 삭제버튼 클릭시,
"정말 삭제하시겠습니까?"경고창이 뜸 =>해결!
if (confirm("정말 삭제하시겠습니까?") === true){
setCountries(filteringCountries); //삭제한 후의 객체들을 뿌려줌!
}else{
return false;
}
5. sort함수로 메달갯수 대로 정렬하기!=>해결
setCountries([...countries, newCountry].sort(function compare(a,b){
if(a.gold > b.gold){
return b.gold - a.gold}
else if(a.gold === b.gold){
return b.silver - a.silver}
else if(a.silver === b.silver){
return b.bronze - a.bronze}
}))처음에 ===말고 =(대입연산자)를 써서 모든 금메달 값이 0을 적어도 같은 값으로 고정되어 출력됐는데 ===로 제대로 수정하니 정상적으로 나열됐음!
FEELINGS(느낌, 주관) : 나의 감정적인 반응, 느낌
나 정말 혼자 할 수 있는게 아무것도 없구나!
FINDINGS(배운 것) : 그 상황으로부터 내가 배운 것, 얻은 것
FUTURE(미래) : 배운 것을 미래에는 어떻게 적용할 지