[JavaScript] lodash sortBy

react, javascript에서는 보통 sort를 이용해 정렬을 많이한다.

그러나 sort를 사용하면 모두가 알다시피 코드 가독성이 많이 떨어질 수 밖에 없다.
또한 sort는 이상한 문제점이 있다.

const arr = [1,3,20,5];

const sortedArr = arr.sort();

console.log(sortedArr) // [1,20,3,5]

sort를 그냥 사용하면 위처럼 우리가 예상한대로 동작하지 않는다...(자바스크립트... ㅠ.ㅠ🥲)

 

그로인해 자바스크립트를 사용하는 개발자라면

보통 기본 sort를 바로 사용하지 않고 (a,b) 두 인자를 비교하는 함수를 만들어 sort를 사용한다.

const arr = [1,3,20,5];

const sortedArr = arr.sort((a,b) => a - b);

console.log(sortedArr) // [1,3,5,20]

 

기본적인 예시를 통해 sort를 사용할 때 코드의 가독성이 어떤지 확인해보자!

const userData = [
	{ id: 5, name: 'kenny', birth: 19970529},
	{ id: 2, name: 'mile', birth: 19960122},
	{ id: 2, name: 'toil', birth: 19920912},
	{ id: 4, name: 'jack', birth: 20010621},
	{ id: 7, name: 'hendy', birth: 20071121},
]

위와 같이 서버에서 object형태로 날라온 userData가 존재한다고 생각해보자.

 

먼저 id 오름차순으로 정렬해보자!

function App() {
  const userData = [
    { id: 5, name: "kenny", birth: 19970529 },
    { id: 2, name: "mile", birth: 19960122 },
    { id: 2, name: "amily", birth: 19920912 },
    { id: 4, name: "jack", birth: 20010621 },
    { id: 7, name: "hendy", birth: 20071121 },
  ];

  const sortedUserId = userData.sort((a, b) => a.id - b.id);

  console.log(sortedUserId);

  return <></>;
}

여기까진 괜찮은 것 같다. 그러나 id가 같을 때 name을 알파벳 순서로 다시 정렬하고 싶다.

function App() {
  const userData = [
    { id: 5, name: "kenny", birth: 19970529 },
    { id: 2, name: "mile", birth: 19960122 },
    { id: 2, name: "mile", birth: 19920912 },
    { id: 4, name: "jack", birth: 20010621 },
    { id: 7, name: "hendy", birth: 20071121 },
  ];

  const sortedUserId = userData.sort((a, b) => {
    if (a.id === b.id) {
      if (a < b) return -1;
      if (a > b) return 1;
      if (a === b) return 0;
      else return -1;
    }
    return a.id - b.id;
  });

  console.log(sortedUserId);

  return <></>;
}

뭔가 더 복잡해졌다. 그러나 이름도 같다면 나이가 많은 순서대로 정렬하고 싶어졌다.

function App() {
  const userData = [
    { id: 5, name: "kenny", birth: 19970529 },
    { id: 2, name: "mile", birth: 19960122 },
    { id: 2, name: "mile", birth: 19920912 },
    { id: 4, name: "jack", birth: 20010621 },
    { id: 7, name: "hendy", birth: 20071121 },
  ];

  const sortedUserId = userData.sort((a, b) => {
    if (a.id === b.id) {
      if (a < b) return -1;
      if (a > b) return 1;
      if (a === b) {
        return a.birth - b.birth;
      } else return -1;
    }
    return a.id - b.id;
  });

  console.log(sortedUserId);

  return <></>;
}

뭔가 사실 그냥 정렬만 하고 싶었을 뿐인데 코드가 많이 난잡해졌다. 이를 더 멋지게 해결하는 방법이 없을까?

sortBy() 

그래서 sortBy()가 존재한다!

lodash의 sortby를 사용하면 된다.

 

lodash 설치 방법

$ npm i -g npm
$ npm i --save lodash

 

 

리액트를 예시로 위 마지막 코드를 sortBy를 써서 표시해보면

import sortBy from "lodash/sortBy";

function App() {
  const userData = [
    { id: 5, name: "kenny", birth: 19970529 },
    { id: 2, name: "mile", birth: 19960122 },
    { id: 2, name: "mile", birth: 19920912 },
    { id: 4, name: "jack", birth: 20010621 },
    { id: 7, name: "hendy", birth: 20071121 },
  ];

  const sortedUserId = sortBy(userData, "id", "name", "birth");

  console.log(sortedUserId);

  return <></>;
}

export default App;

이렇게 간단하게 설정할 수 있다...!

reverse()를 써서 역순 정렬도 가능하며, 원하는 대로 이어가며 정렬을 할 수 있다.

import sortBy from "lodash/sortBy";

function App() {
  const userData = [
    { id: 5, name: "kenny", birth: 19970529 },
    { id: 2, name: "mile", birth: 19960122 },
    { id: 2, name: "mile", birth: 19920912 },
    { id: 4, name: "jack", birth: 20010621 },
    { id: 7, name: "hendy", birth: 20071121 },
  ];

  const sortedUserId = sortBy(userData, "id", "name", "birth").reverse();

  console.log(sortedUserId);

  return <></>;
}

export default App;

sortBy를 아는 개발자라면 위 코드가 더 매력적인 코드로 보일 수 있을 것 같다고 생각한다.

프론트단에서 object 형식의 서버 데이터를 props로 받아 띄울 때 sortBy를 사용해 간단하게 구현할 수 있을 것 같다.