fetch로 카테고리별로 분류하기

react강의를 들으면서, fecth로 얻은 json파일을 카테고리별로 저장하는 방법을 배웠었다. 문제를 간단하기위해, 받는 테스트케이스를 아래와 같이 작성하기로 하였다.

const list = [
  { id: "1", name: "one", category: "a" },
  { id: "2", name: "twp", category: "b" },
  { id: "3", name: "three", category: "a" },
];

위의 케이스의 경우에 케이스가 a, b 두가지가 존재한다 만일 분류를 한다면,

{
  a: [
    { id: '1', name: 'one', category: 'a' },
    { id: '3', name: 'three', category: 'a' }
  ],
  b: [ { id: '2', name: 'twp', category: 'b' } ]
}

다음과 같이 분류가 되어야한다. 강의 내에서는

  list.reduce((acc, cur) => {
    if (acc.hasOwnProperty(cur.category)) {
      return { ...acc, [cur.category]: [...acc[cur.category], cur] };
    } else {
      return { ...acc, [cur.category]: [cur] };
    }
  }, {})

다음과 같이 사용하였다. 

reduce의 default value를 {}로 하고, 저장된 key값이 없으면 [cur], 저장된 key값이 있으면 [...acc[cur.category], cur] 저장된 acc에서 cur.category키 값을 호출하여 값을 추가한다.

 if문부터 else까지 4줄이 추가되는 것을 보며 좀 더 심플하게 쓸 수 있지않을까 고민을 하다가

  list.reduce(
    (acc, cur) =>
      acc.hasOwnProperty(cur.category)
        ? { ...acc, [cur.category]: [...acc[cur.category], cur] }
        : { ...acc, [cur.category]: [cur] }, {}
  )

3항 연산자로 조금 더 깔끔하게 써봤다. 하지만 아무래도, if else정도만 생략된 정도니 더 줄일 수 있을지 않을까.. 하고 검색해봤는데, rest 파라미터(...)에서 문제가 많이 생겼다 그래서 괄호를 적절하게 사용하였다.

  list.reduce((acc, cur) => {
    return {
      ...acc,[cur.category]: [...(acc[cur.category] ? acc[cur.category] : []), cur],
    };
  }, {})

 

마찬가지로 삼항연산자를 사용하였지만, 조건부로 rest 파라미터를 사용하여 한줄로 매우 깔끔해졌다.