React - CheckBox

console.clear();

import React, { useState } from "https://cdn.skypack.dev/react@18";
import ReactDOM from "https://cdn.skypack.dev/react-dom@18";

const App = () => {
	const fruits = ["사과", "바나나", "귤"];

	const [selecteds, setSelecteds] = useState(
		new Array(fruits.length).fill(false)
	);
	
	const toggleFruitSelected = (index) => {
		const newSelecteds = selecteds.map((el,_index) => _index == index ? !el : el);
		setSelecteds(newSelecteds);
	}
	
	const selectedFruits = selecteds.map((el,index) => (el ? fruits[index] : el)).filter((el) => el);
	
	return (
		<>
			<h4 className="font-bold">체크박스 연습</h4>
			<ul>
				{fruits.map((fruit, index) => (
					<li key={index}>
						<label className="cursor-pointer flex items-center gap-x-3">
							<input type="checkbox" value={fruit} className="checkbox checkbox-primary" onChange={() => toggleFruitSelected(index)}/>
							<span>{fruit}</span>
						</label>
					</li>
				))}
			</ul>
			<hr/>
			<div>select status : {JSON.stringify(selecteds)}</div>
			<div>select fruit : {selectedFruits.join(', ')}</div>
			
		</>
	);
};

ReactDOM.render(<App />, document.getElementById("root"));

• .fill() : useState 초기화될 때 채움
• .join() : 배열의 원소를 문자열로 합치기