왜?

React JSX컴포넌트 배열을 풀어서 렌더링 해주는 기능이 있다.
그래서 map함수를 사용해서 동적으로 렌더링 해주는 방식을 많이 사용하는데 객체형태로 사용하는 state를 동적으로 렌더링 해주기 위해서 객체를 배열처럼 사용할 수 있는 방법을 찾아봤다.

방법

Object.keys(obj) method를 사용한다.

import React, { useState } from "react";

function App() {
  const [obj, setObj] = useState({ a: { text: "a" } });
  return (
    <div>
      <div>test</div>
      {Object.keys(obj).map((item) => (<span>{obj[item].text}</span>))}
    </div>
  );
}

export default App;

keys() method는 인자로 들어온 객체의 키값을 배열로 반환한다.
그 배열에 map함수를 이용할 수 있다.