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



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

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

_.sortBy(Collection, fieldName);


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


! sortBy() 예제보기만약 아래와 같은 Collection 데이터가 존재하는 경우 각각의 필드명에 대하여 정렬할 수 있을 것입니다. 어떻게 수행하는지 확인해보세요.
var items = [
  { no: 1, name: 'web', date: '180804' },
  { no: 2, name: 'is', date: '180802' },
  { no: 3, name: 'free', date: '180801' },
  { no: 4, name: 'forever', date: '180804' },
];

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

// 출력결과
[
  {no: 3, name: "free", date: "180801"},
  {no: 2, name: "is", date: "180802"},
  {no: 1, name: "web", date: "180804"},
  {no: 4, name: "forever", date: "180804"}
]

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



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

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


위와같이 두 번째 인자값으로 배열안에 원하는 컬럼을 여러개 추가하여 사용하면 가능합니다. 그럼 아래 예제를 봐주세요.
_.sortBy(items, ['date', 'name']);

위 코드를 수행하면 date, name으로 각각 정렬되어 결과가 나타납니다.
[
  {no: 3, name: "free", date: "180801"},
  {no: 2, name: "is", date: "180802"},
  {no: 4, name: "forever", date: "180804"},
  {no: 1, name: "web", date: "180804"}
]

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