여기에 state를 굳이? - 올림픽 정렬(sort)

Context API와 Redux를 배우며 현재 과제(포켓몬 도감)뿐만 아니라 이전 과제(올림픽 트래커)에 적용해보는 시간을 가졌다.

올림픽 메달 트래커 과제 구현 정리 (클릭)

 

두 가지를 구현하면서 가장 헷갈리는 것이 전역으로 관리할 상태를 골라내는 것이다.

그래서 Context 파일에 모든 함수형 컴포넌트를 가져오게 된다..

 

올림픽 프로젝트에서 함수 컴포넌트는

추가, 삭제, 업데이트, 정렬 로 나누었다.

 

Context 파일을 보며 고민한 것이 정렬 함수를 어디에 위치해야 하나 싶었다.

(reducer로 만들기? List 컴포넌트에 두기?)

 

 

sort 로직 이해

우선 정렬 로직을 살펴보자면 다음과 같다.

// 정렬 함수
  const [sortType, setSortType] = useState("gold");

  const getSortMedals = () => {
    const tempNationList = [...nationList]; //sort 메서드는 원본 배열 직접 변경, 정렬된 배열 반환
    if (sortType === "gold") {
      return tempNationList.sort((a, b) => b.gold - a.gold);
    }

    if (sortType === "total") {
      return tempNationList.sort((a, b) => {

        return b.gold + b.silver + b.bronze - (a.gold + a.silver + a.bronze);
      });
    }
  };

 

• useState를 통해 'sortType'을 관리한다. (정렬 유형 - gold와 total)
• sort 메서드는 원본 배열을 직접 변경하기 때문에 새롭게 복사한 배열(tempNationList)을 활용한다. ⭐️
• 전체적인 흐름
  • nationList에 배열로 저장된 국가 데이터는 기본적으로 sortType === 'gold' 로 정렬되어있다.
  • 정렬 라디오 버튼을 클릭
  • gold / total에 따라서 기준대로 정렬한다.
  • 정렬한 값(변수명: medalRank)을 새로운 상태(sortType State) 화면에 출력한다.

 

 

의문점과 답변

 

⭐️

부분에서 의문점이 들었다.

? State를 지정했지만, tempList를 따로 만드는 이유가 뭘까

-> state 지정은 따로 만든 것이 아닌 '상태'을 의미한다. tempList를 통해 새로운 값을 만들고 그 값을 상태에 지정하는 것이다.

정렬 내용을 새로운 상태(sortType State)에 저장하기 때문에 상태가 변할 때마다(=정렬 기준이 변할 때마다) 리렌더링이 일어나게 된다.

 

 

? 그렇다면, 변수(tempList)만이 아닌 State로 관리하는 이유는 뭘까

-> 변수로 값을 만들면 꼭 setNation을 해줘야 정렬 값이 반영된다.

하지만 setNation을 해버리면 기존 리스트의 값이 전체적으로 변해버린다.

 

사실 이 과제 내에서는 리스트가 한 카테고리밖에 없어서 괜찮지만

만약 쇼핑몰 사이트 같이 다양한 카테고리(인기순, 가격 낮은 순 등)을 정렬한다고 하면

모든 리스트의 값이 새로 지정되기 때문에 큰 문제가 생길 수도 있다.

웬만해서는 기본 리스트 값을 안 건드리는 게 좋다.

 

 

최종 해결

따라서 정렬 함수는 기존 리스트의 값을 복제하여 새로운 state로 관리하기 때문에

sort용 slice를 따로 만들어서 관리해주어야 할 듯 하다.