lodash 소팅, 정렬하기, sortBy()

Lodash를 사용하여 Collection 값을 정렬할 수 있는 sortBy()에 대하여 알아봅니다. 먼저 sortBy()는 무엇일까요?

# lodash의 sortBy()는 무엇인가?

Collection 값들을 원하는 필드를 기준으로 정렬해줍니다. 특히 웹페이지에서 데이터를 모두 불러오는 경우 soryBy()를 사용하면 매우 편리하게 정렬할 수 있죠. 프론트엔드 프레임워크를 사용하는 싱글페이지 어플리케이션에서 데이터를 조작할때 유용하게 사용할 수 있을 것입니다.

아래는 sortBy() 사용하는 방법으로 다음과 같습니다.

_.sortBy(Collection, fieldName);


컬렉션값에 소팅을 원하는 필드명을 입력합니다. 매우 간단하죠. 그럼 아래는 예제소스입니다.

! sortBy() 예제보기

만약 아래와 같은 Collection 데이터가 존재하는 경우 각각의 필드명에 대하여 정렬할 수 있을 것입니다. 어떻게 수행하는지 확인해보세요.

이제 위 items를 date를 기준으로 정렬해보겠습니다. 방법은 매우 간단합니다. 아래와 같이 입력합니다.

매우 쉽게 원하는 컬럼(필드)명으로 정렬을 수행하였습니다. 이를 직접 작성하려면 매우 긴 코드가 필요하고 시간도 많이 걸리겠죠. 하지만 lodash를 사용하면 많은 시간을 줄일 수 있습니다.

! 오름차순, 내림차순으로 변경하기, asc 또는 desc 정렬

이 전 버전에서는 옵션값을 사용하여 오름차순, 내림차순 정렬이 가능했지만 지금은 sortBy()만 사용해서는 어렵습니다. 그래서 다른 방법을 찾아야하는데 이때 유용한 방법이 바로 reverse() 내장함수를 사용하는 방법입니다. reverse()는 자바스크립트의 배열 메소드로 배열의 순서를 역순으로 바꾸어줄 수 있습니다. 즉 오름차순인 데이터에 reverse()를 사용하면 반대로 가져오므로 내림차순과 동일한 효과를 가져올 수 있습니다. 위의 코드의 차순을 반대로 바꾸려면 아래처럼 사용할 수 있습니다.

차순 변경이 필요할 때 가장 쉽고 빠르게 사용 가능한 방법입니다.

# sortBy() 복수개의 컬럼으로 정렬하기

하나가 아닌 여러개의 컬럼을 기준으로 정렬할 수 있습니다. 마치 SQL처럼 사용할 수 있는데요 ... 예를들어서 name 그리고 date를 기준으로 sorting하는 것이 가능합니다. 이때는 아래와 같이 사용합니다.

_.sortBy(Colleciton, [sort1, sort2]);


위와같이 두 번째 인자값으로 배열안에 원하는 컬럼을 여러개 추가하여 사용하면 가능합니다. 그럼 아래 예제를 봐주세요.

위 코드를 수행하면 date, name으로 각각 정렬되어 결과가 나타납니다.

여기까지 정렬에 사용할 수 있는 lodash의 sortBy()에 대하여 알아보았습니다. lodash는 복잡한 코드를 쉽게 사용할 수 있는데 특히 컬렉션 데이터에 대하여 여러 조작이 가능합니다. 이를 잘 활용하면 매우 유용하니 꼭 알아두면 좋을 것입니다.