[TIL] objects are not valid as a react child (found: object with keys {menu1}) 에러 해결

어떤 에러인가

대체로 데이터는 배열메서드를 이용해야 하기 때문에 배열안의 객체를 넣은 딕셔너리 자료형을 주로 쓴다.
title이란 배열을 map 반복문을 써서 안에 데이터 값인 item을 출력하도록 해주었는데 objects are not valid as a react child (found: object with keys {menu1}) 에러가 떴다.
무슨 에러 인고 하니 아까 말했던대로 배열안의 객체형태이기 때문에 key value 형태로 값을 가져와야 했던 것이다.

import React from "react";
import "../css/Header.css";

const MenuTitle = () => {
  const title = [
    { id: 1, menu: "My Todo List" },
    { id: 2, menu: "React" },
  ];

  return (
    <div>
      <ul className="menu-bar">
        {title.map((item) => {
          return (
            <li key={item.id} className="menu-bar-li">
              {item.menu}
            </li>
          );
        })}
      </ul>
    </div>
  );
};

export default MenuTitle;

생각해보니 반복문을 돌리려면 key이름도 맞춰줘야 하기 때문에 menu로 통일해주었다. 참고로 map을 사용할때는 꼭 안의 돌리는 엘리먼트의 key값을 설정해 주어야한다. React에서 해당 엘리먼트에 안정적인 고유성을 부여해주고 엘리먼트를 추가, 삭제할 때 해당 key값으로 식별해서 조작할 수 있기 때문이다.

에러를 해결하고 나서...

웬만한 에러는 이미 구글링에 많이 나와있고, 나보다 정리가 더 잘되어 있지만 한번 더 복습하고 놓칠 수 있는 개념을 돌아볼 수 있는 과정이기에 나의 방식으로 정리해보았다.