가장 간단하게 설명드리면 초기에 list는 object 타입의 변수입니다. 하지만 concat으로 새 데이터를 추가하고 setList를하면 array 타입의 변수가 되어버립니다. 순서대로 나열해보면 다음과 같습니다.
1. useState로 list에 값을 초기화 할때는 object 타입으로 선언합니다.
const [list, setList] = useState({
categories: [
{ id: 1, kind: "식비" },
{ id: 2, kind: "문화" }
],
card: [
{ id: 1, kind: "삼성카드" },
{ id: 2, kind: "국민카드" }
]
});
2. setList(list.card.concat(newData))를 하면 list는 array 타입으로 변합니다. 결과를 코드로 나타내면 다음과 같습니다.
const list = [
{ id: 1, kind: "삼성카드" },
{ id: 2, kind: "국민카드" },
{ id: 3, kind: 'NewData'}
]
3. list.card 또는 list.categories는 더이상 유효한 object 프로퍼티가 아니게 됩니다. 결국 null(undefined)이며 null.map() 함수를 호출하려고 해서 정의되지 않았다는 에러를 표시하게 됩니다.
console.log(list.card == null)
console.log(list.categories == null)
4. 동작하는 짧은 코드는 다음과 같습니다.
import React, { useState } from "react";
export default function App() {
const [list, setList] = useState({
categories: [
{ id: 1, kind: "식비" },
{ id: 2, kind: "문화" }
],
card: [
{ id: 1, kind: "삼성카드" },
{ id: 2, kind: "국민카드" }
]
});
const insertNewData = () => {
const newData = {
id: 3,
kind: "new kind"
};
// Object를 Array로 변환 시킴
// setList(list.card.concat(newData))
// 정상 동작하는 코드
setList({
...list,
card: list.card.concat(newData)
});
};
console.log(list);
return (
<div className="App">
<button type="button" onClick={insertNewData}>
New data
</button>
</div>
);
}
![]()
