10. 31. 18일차 TIL - React 개인과제_02 기능구현

오늘은 React 개인과제에서 어제 구현하지 못했던 기능들을 하나씩 추가하였다.

 

과제 구현 리스트

필수사항

• CURD 기능 구현하기
  • Delete기능
  • Update기능
• 메달 집계 정렬
  • 금메달 수가 높은 국가를 리스트의 상위에 표시하기
  • 국가 추가, 수정, 삭제 시 리스트가 자동으로 재정렬되도록하기

선택사항

• Create 시 중복 국가 처리하기
• Update 시 존재하지 않는 국가 알림
• 총 메달 수가 높은 국가를 리스트 상위에 표시하기

---

1. CURD 기능 구현하기 - Delete

삭제하기를 구현하기 위한 로직을 다음과 같이 구상해보았다.

 

1. 삭제 버튼을 클릭하면 table에서 등록되어 있는 해당 국가의 정보를 삭제하고자 한다.

2. filter함수를 사용하여 countryList를 순회하고 선택한 나라와 이름이 같을 경우는 제외한다.

3. filter함수의 결과를 다른 새로운 filteringCountry에 담고 이것은 화면에 표시한다.

4. 이후 사용자에게 정보가 삭제되었음을 알린다.

 

처음에는 countryName만 비교하면 될 것이라 생각하고 아래와 같이 작성하였더니 제대로 작동하지 않았다.

 

이후 filter 메서드를 다시 공부하였다.

• 배열의 요소 중에서 특정 조건을 만족하는 요소들만을 추출하여 새로운 배열을 생성하여 반환한다.
• 매개변수로 element, index, array를 받는다.
• 특정 조건을 평가하는 로직을 통해 가공된 후 true일 경우 해당 요소를 newArray에 포함시킨다.

정의를 다시 확인한 이후 생각해보니 매개변수자리에 countryName을 넣는다고는 해도 이것은 useState에 저장되어 있는 countryName을 가지고 오는 것이 아니었다. 이는 단순히 매개변수의 임의의 이름일 뿐, 내가 원하는 값을 얻기 위해서는 매개변수로 받은 객체안에서 countryName을 찾아 비교해야하는 것이었다.

문제점을 찾았으니 수정하여 코드를 작성하였고 문제없이 잘 작동하였다.

---

2. CURD 기능 구현하기 - Update

업데이트를 구현하기 위한 로직을 다음과 같이 구상해보았다.

 

1. 업데이트 이벤트는 국가명이 같은 경우에만 발생해야 한다.

2. 업데이트 버튼을 누르면 map 메서드를 통해 새로운 배열을 반환한다.

3. 새로운 배열을 반환할 때, 국가명이 일치할 경우 갱신된 데이터로 반환하고 alert을 통해 사용자에게 update 되었음을 알린다.

4. 새로운 배열을 반환할 때, 국가명이 기존 데이터에 포함되지 않았을 경우 alert을 통해 사용자에게 등록되지 않은 국가임을 알린다.

5. 모든 순회가 끝나면 업데이트되어 새로 생성된 데이터로 table을 갱신한다.

6. 이후 input창의 value값을 모두 빈 칸으로 비운다.

이번엔 업데이트 자체의 기능을 제대로 작동하였다. 하지만 alert 기능을 추가하자 문제점이 발견되었다.

업데이트 버튼을 누르면 국가명이 같을 경우 분명히 리턴이되어 다음 등록되어 있지 않는다는 알림이 나오지 않아야 하는데 알림이 같이 나오고 있었다. 어떤 게 문제였을까 생각을 해보니 map메서드를 통해서 순회를 하는 과정에서 alret를 띄웠기 때문에 두 가지 경우에서의 알림창이 생성되는 것이었다. 이를 해결하려면 어떻게 해야할까? 아 그렇다면 find 메서드를 사용하면 좋지 않을까?

이후 find 메서드를 같이 사용하여 코드를 수정해보았다.

리펙토링된 업데이트 btn

 

find 메서드를 사용하여 if의 조건문을 더 명확하게 제시해준 이후 조건이 true일 경우 map메서드를 통해 순회하여 원하는 리스트를 생성하였고, if문의 조건이 false일 경우 알림창으로 등록된 국가가 아님을 사용자에게 알려줄 것이다.

---

3. 메달 집계 기능

메달집계 기능에서 필수 구현사항은 다음과 같다.

• 금메달 수가 높은 국가를 리스트의 상위에 표시하기
• 국가 추가, 수정, 삭제 시 리스트가 자동으로 재정렬되도록하기

sort 메서드를 사용하여 금메달의 수를 비교하면 간단하게 해결할 수 있을 것이다.

sort 메서드는 원본 배열에 직접적으로 개입하여 순서를 변경할 수 있는 메서드이다.

비교 함수는 두 개의 인자를 매개변수로 받으며, 다음과 같은 규칙을 따른다.

• 음수 : 첫 번째 인자가 두 번째 인자보다 작다.
• 0 : 두 인자가 같다.
• 양수 : 첫 번째 인자가 두 번째 인자보다 크다.

나는 금메달이 많은 순서대로 내림차순 정렬을 할 것이기 때문에 큰 값에서 작은 값을 빼도록 설정하여 첫 번째 인자가 두 번째 인자보다 크게 할 것이다.

이를 활용하여 메달의 총합이 가장 많은 나라 순으로 내림차순하는 것도 쉽게 구현할 수 있을 것 같다.

 

이제 두 가지의 정렬 방법을 사용자가 직접 선택할 수 있게 하려면 어떻게 해야할까? 조금 더 고민해보자.

---

4. Create 기능 - 중복 국가 처리하기

 

추가하기 버튼을 눌렀을 때, 만약 같은 나라가 등록되려고 한다면 이를 막고 알림창을 띄우려고 한다.

처음에는 for문을 사용하여 로직을 구성했다.

---

★ 18일차 소감

오늘은 TIL을 작성하는 동안 갑자기 키보드가 제대로 인식되지 않는 문제가 발생하였다. 빨리 정리한 뒤 til을 끝내야겠다.. 때문에 내일은 나머지의 기능구현과, 작성된 코드를 좀더 깔끔하게 리펙토링하는 내용의 til을 작성하게 될 것 같다.