Object.entries(): 객체를 배열처럼 다루는 가장 효과적인 방법

안녕하세요! 자바스크립트 개발을 하다 보면, 객체에 저장된 데이터를 다루는 경우가 참 많죠. 그런데 map 함수처럼 유용한 배열 메서드들은 객체에 바로 사용할 수 없다는 불편함이 있습니다.

이때 **Object.entries()**가 아주 유용합니다. 이 메서드는 객체를 [key, value] 쌍으로 이루어진 배열로 변환해 주어, 객체 데이터를 배열처럼 다룰 수 있게 만들어줍니다.

---

Object.entries()의 기본 사용법

Object.entries()는 객체를 인수로 받아, 그 객체의 모든 열거 가능한 속성([키, 값]) 쌍을 2차원 배열로 반환합니다.

예를 들어, 아래와 같은 사용자 정보 객체가 있다고 가정해 볼게요.

JavaScript

const user = {
  name: '김개발',
  age: 30,
  city: '서울',
};

// Object.entries()를 사용해 객체를 배열로 변환
const entries = Object.entries(user);

console.log(entries);
// [ ['name', '김개발'], ['age', 30], ['city', '서울'] ]

위 코드처럼, Object.entries()는 객체를 2차원 배열로 바꿔줍니다. 각 내부 배열의 첫 번째 요소는 **키(key)**이고, 두 번째 요소는 **값(value)**이 됩니다. 이렇게 변환된 배열은 map, filter, reduce 등 다양한 배열 메서드와 함께 사용할 수 있어 매우 편리합니다.

---

React에서 Object.entries() 활용하기

Object.entries()의 가장 강력한 활용 사례는 React 컴포넌트에서 동적인 리스트를 렌더링할 때입니다. 아래는 온라인 상점의 제품 재고 데이터를 예시로, map 함수를 사용해 카테고리별로 제품 목록을 렌더링하는 코드입니다.

JavaScript

import React from 'react';

const productInventory = {
  electronics: [
    { id: 'e01', name: '스마트폰', price: 1200000 },
    { id: 'e02', name: '노트북', price: 2500000 },
  ],
  books: [
    { id: 'b01', name: '자바스크립트 바이블', price: 45000 },
  ],
};

function ProductList() {
  return (
    <div>
      <h1>온라인 상점 재고</h1>
      {Object.entries(productInventory).map(([category, products]) => (
        <div key={category}>
          <h2>{category.toUpperCase()}</h2>
          <ul>
            {products.map((product) => (
              <li key={product.id}>
                {product.name} - {product.price.toLocaleString()}원
              </li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}

export default ProductList;

Object.entries(productInventory)는 객체를 [ ['electronics', [...] ], ['books', [...] ] ]와 같은 배열로 변환합니다. 그리고 .map(([category, products]) => ...) 부분에서는 **배열 비구조화(Destructuring)**를 사용해 키(category)와 값(products)에 바로 접근합니다. 이 덕분에 카테고리명을 제목으로 표시하고, 해당 제품 목록을 순회하는 코드를 간결하게 작성할 수 있습니다.

Object.entries()를 사용해야 하는 이유

1. 가독성: Object.keys()나 Object.values()를 따로 사용하지 않고도 키와 값에 동시에 접근할 수 있어 코드가 훨씬 간결해집니다.
2. 효율성: 객체를 배열로 변환함으로써 map, filter, reduce 등 다양한 배열 메서드를 자유롭게 활용할 수 있습니다.
3. 안전성: 키와 값이 쌍을 이루기 때문에 데이터의 누락이나 잘못된 매핑을 방지할 수 있습니다.

이제 Object.entries()를 활용해 객체 데이터도 배열처럼 자유롭게 다뤄보세요! 궁금한 점이 있다면 언제든지 물어보세요.