const list = [
{number:1, title:"제목입니다1", date:"2020.01.01"},
{number:2, title:"제목입니다2", date:"2020.01.02"},
{number:3, title:"제목입니다3", date:"2020.01.03"},
{number:4, title:"제목입니다4", date:"2020.01.04"},
{number:5, title:"제목입니다5", date:"2020.01.05"},
{number:6, title:"제목입니다6", date:"2020.01.06"}
]
export default function List() {
const [aaa, setAaa] = useState(false);
const [bbb, setBbb] = useState(Array(list.length).fill(false));
const onChangeCheckMain = () => {
setAaa(!aaa);
};
// 원래 (index) 자리에 (event)가 무조건 들어오지만
// 함수를 한번 더 감싸줌으로써 index가 전달되게 해준다..
const onChangeCheckList = (index) => {
const bbbLists = [...bbb];
bbbLists[index] = !bbb[index];
console.log(bbbLists);
setBbb(bbbLists);
};
return (
<>
<Row>
<input type="checkbox" checked={aaa} onChange={onChangeCheckMain} />
<div>번호</div>
<div>제목</div>
<div>작성일</div>
</Row>
{list.map((el, index) => (
<Row key={el.number}>
<input
type="checkbox"
checked={bbb[index]}
// 클로저
// 함수로 감싸지 않으면 안된다
// (event) => onChangeCheckList(index)와 같음
onChange={() => onChangeCheckList(index)}
/>
<div>{el.number}</div>
<div>{el.title}</div>
<div>{el.date}</div>
</Row>
))}
<button>선택 삭제</button>
</>
);
}
마성의 클로저다