올림픽 메달개수 업데이트 & 제거 기능 개발 & 금메달 많은 순 정렬
// 삭제시 페이지
// 결과 삭제 버튼 클릭 시
const deleteData = (index) => {
setResult((prevResult) => prevResult.filter((_, i) => i !== index));
};결과 삭제 버튼 클릭시 삭제버튼이 눌러진 index를 찾아 이전의 데이터에서 filter처리하여 삭제버튼이 클릭된 index와 다른 것들만 볼 수 있도록 설정했다.
// 업데이트시 페이지
// 업데이트 버튼 클릭 시
const update = () => {
if (editIndex !== null) {
setResult((prevResult) =>
prevResult.map((item, index) =>
index === editIndex ? { country, ...medal } : item
)
);
// 수정 완료 후 인덱스 초기화
setEditIndex(null);
// 입력 창 초기화
setCountry("");
setMedal({ 금: 0, 은: 0, 동: 0 });
} else {
alert("업데이트할 항목을 선택해주세요.");
}
};업데이트 버튼 클릭시 인덱스를 활용해 확인 후 국가이름과 입력된 국가이름이 같으면 지금 받은 결과값을 아니면 원래 있던 결과값을 보여주도록 설정했다.
const sortedGoldList = [...result].sort((a, b) => b.금 - a.금);결과값을 받아 금메달이 많은 순으로 내림차순 정렬을 해주었고
정렬된 결과값을 Result컴포넌트에 props로 주었다.
🌼 오늘 알게 된 것들
1. filter에서 _ 사용의 의미
filter 함수는 배열의 각 요소를 테스트하여 조건을 만족하는 요소만을 반환하는 함수입니다. filter의 콜백 함수는 두 가지 인자를 받을 수 있습니다:
1. 현재 요소 (element)
2. 현재 요소의 인덱스 (index)
가끔은 콜백 함수에서 모든 인자가 필요하지 않을 수 있다. 예를 들어, 현재 요소가 필요 없고 인덱스만 필요할 경우, 현재 요소를 무시하기 위해 _를 사용한다.
ex) 요소만 사용하고 인덱스는 무시할 때
2. Find index
콜백 함수가 찾아낸 첫 번째 조건을 만족하는 배열 요소의 인덱스
만약 조건을 만족하는 요소를 찾지 못했다면 -1을 반환
3. reduce() 메서드의 initialValue(초기값) 사용법
- 2개의 인자 + 1개의 초기값
- acc accumulator : 누산기, 누적되는 값, 최종적으로 출력되는 값
- cur current : 현재 돌고 있는 요소
- initialValue : acc의 초기값 (optional)
4. React 컴포넌트 나누는 방법
- 작은 파일일수록 위에서부터 아래로
- 컴포넌트를 쪼갠 이후에 탭다운으로 만ㄴ들 것
- 리액트 도큐먼트 꼭 읽어보기
- css파일은 module.css를 사용할 것
module.css는 파일 뒤에 난수를 만들어주어 다른 컴포넌트에 영향을 끼치지 않도록 만들어줌
오늘 느낀 것 👀
아직 스스로 혼자 로직을 짜고 구현하는 것이 많이 어렵다. 한 글자라도 틀리거나 배열, 객체에 대한 이해가 부족하면 작동하지 않는 것이 코딩이기에..
로직들을 계속해서 이해하려고 하고 props, state의 이해를 키워가는 것이 중요할 것 같다...! 오늘도 화이팅 ㅠㅠㅠㅠ 🥺
