[React] 쇼핑몰 프로젝트 (2) - 가나다순 정렬, 토글 버튼

 

    <button
    onClick={() => {
      let player1 = [...player]
      player1.sort((a, b) => a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1);
      setplayer(player1);
    }}>'가나다순'</button>

 

이런식으로 가나다순 정렬기능을 담은 버튼을 생성했다.

 

 

 

하지만 일회성이었고 다시 원래대로 되돌리는 버튼을 만들고 싶었다

한마디로 토글버튼을 원했다

 

구글링을 동반해 이런저런 시도를 해봤지만

애당초 State변경함수는 데이터의 배열자체를 바꿔주기 때문에

그 전으로 되돌리는 기능은 찾기 어려웠다..

 

꽤 오랜시간 고민끝에

삼항연산자를 이용해

각 data의 고유 id를 정렬하는방식이 낫겠다 싶었다.

 

 

    <button
    onClick={() => {
      let player_1 = [...player];
      let player_2 = [...player];
      player_1 = player_1.sort((a, b) => a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1);
      player_2 = player_2.sort((a, b) => a.id < b.id ? -1 : 1);
      sort_fun == '가나다순' ? setplayer(player_1) : setplayer(player_2);
      setsort( sort_fun == '가나다순' ? sort_fun = '원래대로' : sort_fun = '가나다순')
    }}>{sort_fun}</button>

 

전과 마찬가지로 player_1 변수에 기존배열 스프레드 연산자를 저장한 후

sort_fun버튼이 '가나다순'일 때는 '원래대로'로 변경해주고 '원래대로'일 때는 '가나다순'으로 바꿔줬다.

토글버튼이다.

 

배열도

sort_fun 변수를가진 버튼의 문구가 '가나다순'일때는 (보이는 건 '원래대로'문구)

이름순으로 정렬되게 하고

'가나다순'이 아닐때는

고유 id를 이용한 숫자 정렬로 바뀌는

토글 버튼을 만들었다.

 

 

그 결과물은?

 

 

 

 

state가 아직 익숙치않다보니

꽤 오래고민을 했다.

 

머리가 지끈거린다.

 

혹자는 어떻게든 굴러가게만들면 된다고 하지만

이렇게 코드를 짠게 좋은방법일까?

더 나은 방법도 분명 있을텐데

 

리액트를 더 공부하다보면 자연스럽게 생각나겠지..