[ JS ] Spead연산자로 추가한 JSON 형태 배열 정렬

JSON 형태의 값 안에 새 객체를 추가하고 싶을 때, 주로 다음과 같은 형식을 사용하게된다.

        setCategoryList(() =>
          [
            ...test,
            {
              id: response.data.id,
              value: response.data.value,
              label: response.data.label,
            },
          ]
        );

새로운 배열을 생성하여 기존의 값(객체)들을 스프레드 연산자로 모두 넣고, 추가로 새로운 객체를 추가하는 방식이다.

이 방법은 새 객체가 스프레스 연산자가의 앞에 오느냐 뒤에오느냐에 따라서 맨앞에 추가되거나 맨뒤에 추가되거나 한다.

하지만 어떨 때에는 시프레드 연산자로 가져온 값들 "사이에" 새 객체를 넣고 싶을 때도 있다.

또는 기존의 데이터의 일부 값만 변경하고자 하는 경우에도 filter로 걸러내어 해당 삭제하고 그 부분만 바꾸어서 다시 추가하면 기존의 순서가 틀어지게 된다.

이럴 땐 만들어진 JSON형태의 데이터를 바로 sort를 걸어주면 된다.

        setCategoryList(() =>
          [
            ...test,
            {
              id: response.data.id,
              value: response.data.value,
              label: response.data.label,
            },
          ].sort((a, b) => a.id - b.id) // 오름차순
        );

이렇게 한다면, 기존의 데이터가 id 값을 기준으로 정렬되어 있다고 했을 때, 원하는 위치에 쏙 들어가게 할 수 있다.