이런 에러가 났다
Objects are not valid as a React child (found: object with keys {count}). If you meant to render a collection of children, use an array instead.
어이없게도 useState
사용값을 바꾸다가 실수로 오브젝트 타입 그대로 상태값을 저장해놓고 있었다!
useState
를 사용할때 객체 유형을 꼭 신경써서 해줘야 할 것 같다!
import React from "react";
export default function Count() {
const [count, setCount] = React.useState({ count: 0 }); //이곳에서 에러발생
return (
<div>
<p>{count}</p> <button onClick={click}>숫자 올리기</button>
</div>
);
function click() {
setCount(count + 1);
}
}
👉 이런경우 return
에선 {count}
가 아닌 {count.count}
로 설정해주어 인자 값 내부를 선택해 주어야 한다!
기존 오브젝트 타입이 아닌 객체로 선택하려면
import React from "react";
export default function Example5() {
const [count, setCount] = React.useState(0); //이렇게 설정해주어야 한다.
return (
<div>
<p>{count}</p> <button onClick={click}>숫자 올리기</button>
</div>
);
function click() {
setCount(count + 1);
}
}