오늘은 사실 벨로그 탐험을 하다가 정리가 잘된 게시글을 보고 배운것이 있어서 기록해두려고 작성합니다.!
출처:(https://velog.io/@cham0287/%EC%BD%94%EB%94%A9%ED%85%8C%EC%8A%A4%ED%8A%B8%EB%8A%94-%EC%8B%A4%EB%AC%B4%EC%97%90-%EB%8F%84%EC%9B%80%EC%9D%B4-%EB%90%9C%EB%8B%A4-%ED%9A%8C%EC%82%AC-%EC%BD%94%EB%93%9C-%EB%A6%AC%ED%8C%A9%ED%86%A0%EB%A7%81)

reduce를 switch문으로 filter와 유사하게 쓸 수 있다.

const { a, b, c, d } = types.reduce(
    (acc, type) => {
      switch (types.type) {
        case 'a':
          acc.a.push(type);
          break;
        case 'b':
          acc.b.push(type);
          break;
        case 'c':
          acc.c.push(type);
          break;
        case 'd':
          acc.d.push(type);
          break;
        default:
          acc.all_types.push(type);
          break;
      }
      return acc;
    },
    {
      a: [],
      b: [],
      c: [],
      d: [],
    } as Record<string, Types[]>,
  );

어떤 상황??

• 하나의 같은 배열을 여러번 반복해서 filter를 돌려본 경험이 있을 텐데 나도 쓰면서 찝찝함이 느껴졌다. 머리가 나빠서 그런지 어떻게 하면 더 좋은 방향으로 코딩을 할지 몰랐는데 이렇게 하면 좋은듯!!
• 왜냐면 로직을 분리할 수 있다.
• 여러번 반복하지 않고 분기처리를 해서 반복의 횟수를 줄일 수 있게 되었다.

object.entries

• 객체를 배열처럼 반복 가능하게 할수있는데 key와 value를 가진 배열로 만들 수 있다.

무슨 말이냐면

const obj = {
 a: "1",
 b: "2",
 c: "3"
};

console.log(Object.entries(obj))
// 3) [Array(2), Array(2), Array(2)]

0: (2) ["a", 1]
1: (2) ["b", 2]
2: (2) ["c", 3]

리액트에서

  {Object.entries(types).map(([name, type]) => (
      <>
        <h3>{name}</h3>
        <ul className="type">
          {type.map((item) => <PlayerCard key={item.key} />)}
        </ul>
      </>
    ))}

map 함수 안에 배열을 집어넣은것. 이 문법 또한 유용하겠다.

정말 유익한 블로그글을 발견하게 되었고 글을 읽고 나니까 배워가는게 있어서 정말 뿌듯했다. 감사합니다~!@ 굿 빠이
목요일부터 6일간 휴가다 ㅋㅋ