TypeError: todo is not iterable
TodoListItem
C:/Users/user/Desktop/test-react/src/components/TodoListItem.js:11
8 | import './TodoListItem.scss';9 |
10 | const TodoListItem = ({ todo }) => {
> 11 | const [text, checked] = todo;
12 |
13 | return (
14 | <div className="TodoListItem">
아래는 컴포넌트전체부분임
import React from 'react';
import {
MdCheckBoxOutlineBlank, // 체크가 표시되지않은 네모박스 아이콘
MdCheckBox, // 할일이 완료되었을때만 체크상태를 보여주는 아이콘
MdRemoveCircleOutline,
} from 'react-icons/md';
import cn from 'classnames';
import './TodoListItem.scss';
const TodoListItem = ({ todo }) => {
const [text, checked] = todo;
return (
<div className="TodoListItem">
<div className={cn('checkbox', { checked })}>
{checked ? <MdCheckBox /> : <MdCheckBoxOutlineBlank />}
<div className="text">{text}</div>
</div>
<div className="remove">
<MdRemoveCircleOutline />
</div>
</div>
);
};
export default TodoListItem;
props로 들어오는 todo를 봐야할듯? 저게 객체안에 들어간 형태가 아닐 수도 있고?
{todos.map((todo) => ( ))} 이렇게 map 배열 형태로전달하라고 교재에서 나왔는데 위 본문에서 map거쳐서 전달받으면 안될까??
그러면 코드상 예상되는 문제는 둘 중하나인데 todo가 객체나 어레이가 아니라서 저런 형식으로 쪼갤수 없다 또는 {todo}를 그냥 todo로 쓴다
둘 다도 가능하고? 상위컴포넌트를 확실히 보면 알 수 있을 듯한데 일단 생각나는 정도는 이런정도
const [text, checked] = todo; 여기서 배열을 객체로 바꾸니까됨 왜 배열은 안되는지는 모르겠지만 고치긴함 ㄳㄳ
그러면 객체형태를 디스트럭처링하려면 {}이걸 써야하는데 어레이를 디스트럭처링 하는 방식인 []이걸 써서 에러난듯?
Text checked 배열이아니라 객체임
해결했다 ㄳㄳ 근데 객체에다가 집어넣는게 디스트럭처링 아니지?
객체를 분열해서 사용하는게 디스트럭처링이지 않나요?
배열 디스트럭처링, 객체 디스트럭처링 두개있음
Todo 던질때보면 객체로 넘어와서 객체 디스트럭처링 사용한거임
진짜 자스는 공부할수록 겉만 핣기보다 깊게 공부해야 활용이 가능한거같다 리액트하니까 세부지식까지 필요했네