Object.keys()로 효율적인 배열 순회

Joah·2022년 10월 18일

Javascript

목록 보기

14/16

만약 Card의 갯수가 1000개가 넘는데 그 카드가 업데이트 될 때마다 map을 통해서 매번 배열의 모든 요소를 순회해야 한다면?

업데이트를 하기 위해서 동일한 아이디가 나올 때까지 끝까지 map을 돌면서 해당 요소를 찾고 변경된 데이터만 업데이트 한다.

이때 배열의 길이가 길어지면 길어질수록 비지니스 로직이 수행하는 횟수는 배열에 길이만큼 늘어나게 된다.

성능이 느려지지 않을까?

🌈 Object.keys()를 왜 사용할까?

왜?

배열을 map하게 되면 cards라는 state 전체를 순회하게 된다.

카드는 이렇게 생겼다.

[
  {
    id: 1,
    name: "Joah",
    company: "Apple",
    title: "Software Engineer",
    theme: "dark",
    email: "joah@gmail.com",
    message: "stay cool",
    fileName: "Joah",
    fileURL: null,
  },
  {
    id: 2,
    name: "Jessy",
    company: "Samsung",
    title: "Software Engineer",
    theme: "light",
    email: "Jessy@gmail.com",
    message: "yo dude",
    fileName: "Jessy",
    fileURL: "www.www.com",
  },
  {
    id: 3,
    name: "Kane",
    company: "Apple",
    title: "Software Engineer",
    theme: "colorful",
    email: "Kane@gmail.com",
    message: "hey watttttup",
    fileName: "Kane",
    fileURL: null,
  },
];

위의 state를 매핑하게 되면 배열 안에 있는 모든 요소를 순회하게 된다.
만약 내가 찾는 데이터가 id: 3이라면 금방 순회를 마칠 수 있지만 id: 1000이라면 map으로 데이터를 찾는 시간은 오래걸릴 수 있다.

그래서 Object.keys()는 이걸 보완하기 위해 어떻게 작용하는데?

Object.keys()는 객체의 key값만을 순회한다.
배열을 map 하는 경우에는 모든 요소를 순회하고 찾은 결과값을 리턴하지만
object.keys()는 모든 항목 하나하나 순회하는 것이 아니라 객체의 key만 순회하고 리턴한다.

  const [cards, setCards] = useState({
    1: {
      id: 1,
      name: "Joah",
      company: "Apple",
      title: "Software Engineer",
      theme: "dark",
      email: "joah@gmail.com",
      message: "stay cool",
      fileName: "Joah",
      fileURL: null,
    },
    2: {
      id: 2,
      name: "Jessy",
      company: "Samsung",
      title: "Software Engineer",
      theme: "light",
      email: "Jessy@gmail.com",
      message: "yo dude",
      fileName: "Jessy",
      fileURL: "www.www.com",
    },
    3: {
      id: 3,
      name: "Kane",
      company: "Apple",
      title: "Software Engineer",
      theme: "colorful",
      email: "Kane@gmail.com",
      message: "hey watttttup",
      fileName: "Kane",
      fileURL: null,
    },
  });

즉, key인 1,2,3만 순회하게 된다는 것이다.
일일히 각각의 요소의 id, name, company를 순회하지 않는다.

코드 적용

단순히 배열을 map할 때

<ul className="cards">
  {cards.map((card) => (
    <Card key={card.id} card={card} />
  ))}
</ul>

// card의 모든 요소 즉, id, name, company 등 value 값을 모두 순회한다.

Object.keys()로 객체의 key만 순회할 때

<ul className="cards">
  {Object.keys(cards).map((key) => (
    <Card key={key} card={cards[key]} />
  ))}
</ul>

//card의 key인 1,2,3만 순회한다.
//id, name, company와 같은 value는 자식에게 넘겨주기만 할 뿐