[React] useState 활용해서 사전에 객체의 Template 설정해야 하는 이유

개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 

리코딩 ReCoding

에러 메시지

antd table Each child in a list should have a unique "key" prop. Check the render method of `Body`.

 

작업 도중에 위와 같은 메세지가 떴다. ㅎㅎ 상큼하다.

초급 개발자인 나는 한동안 해메이다 답을 찾았는데, useState로 객체를 설정해두어야 한다는 것이다.

 const [data, setData] = useState({
    result: [
      {
        id: 0,
        donationId: 0,
        itemCategory: "",
        itemCategoryId: 0,
        note: "",
        quantity: 0,
        status: "",
        quantity: 0,
        totalPrice: 0,
        unitPrice: 0,
      },
    ],
  });

위와 같이 설정을 하지 않으면, React에서 사용하는 table의 id 설정 시 에러가 난다.

<Table
	dataSource={data.result}
	rowKey={(record) => record.id}  // <-- 이 부분
>

React에서는 사전에 useState로 값을 사전에 설정해놓지 않은 경우, 수많은 에러가 발생될 여지가 많은 것 같다.

그 이유는, 렌더링을 2번하기 때문이다. 사전에 자체적인 Structure를 구현할 때 한번, 실제 렌더할 때 한번.

 

이 것과 관련해서 이슈가 났던 것중에 또다른 것은

 fetch
        .getOne("admin/donations/" + id + "/classification")
        .then((json) => setData(json));

위와 같이 setData로 설정할 때, useState에서 객체 정보를 사전에 설정해두지 않으면,

렌더 부분에서 바로 data.result.totalPrice <-- 뭐 이런식으로 하부 key에 접근이 불가능하다는 것이다. 당연히 에러가 난다. (렌더링을 2번하니까)

만약에 사전에 totalPrice를 useState를 이용해서 설정해두지 않았으면, 정의되지 않은 객체를 사용한다고 하면서 에러가 난다. ㅠㅠ

리액트의 기본 컨셉과 lifecycle을 이해해야지 알 수 있었지 않았을까 싶다.

개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 

리코딩 ReCoding