React 체크박스 체크값 여부

Question

안녕하세요. React 로 체크박스 구현중 이해가 어려워 질문 올립니다.구현하고 싶은 기능은 체크박스가 여러개가 있고 중복이 되지 않습니다. 체크박스 한개를 클릭했을때 값을 가져와 해당 값에 맞는 로직을 구현하고 싶습니다.예를 들어 지도에 마커가 있는데 강서,강남,강동 이 있습니다. 강남을 클릭했을때 마커는 파랑색으로 변하고 다른 마커는 회색이 됩니다.강동을 클릭했을때 파란색 마커로 변하고 강남,강서는 회색 마커로 변합니다.이런식으로 체크한 값에따라 로직을 구현하고 싶은데 제 머리론 도저히 구현이 어렵습니다..제가 짠 코드는 대략적으로 이렇습니다. const categoryList = [ { name: '캠핑기어',image: }, { name: '취사용품' }, { name: '침구·수면용품' }, { name: '꾸미기·소품' }, { name: '포터블가전' }, { name: '아이디어상품' }, { name: '밀키트·간편식' }, { name: '장작' }, { name: '주류' }, { name: '기타 소모품' }, ]; const [checkedList, setCheckedList] = useState([]); const checkboxes = document.getElementsByName('test') const onCheckedItem = useCallback( (checked, item,i) => { console.log(item) if (checked) { setCheckedList((prev) => [...prev, item]); console.log(checkedList) } else{ setCheckedList(checkedList.filter((el) => el !== item)); } }, [checkedList] ); return ( <>

{categoryList.map((item,i) => { return ( { onCheckedItem(e.target.checked, e.target.id,i); }} /> {item.name} ); })} {}

);}export default App;답변부탁드립니다..

라떼개발자 · Answer

리액트 한지 몇개월 지나서 가물한데 아이디어만 말해볼께요마커 갯수만큼 state (배열) 로 만들어서 해보세요.[{name:”강남“,color:”gray”},{…},….]마커보여줄때 state값에 따라 color다르게 보여주고요. 선택한건 blue나머지는 gray로 state를 바꿔줘야 하겠죠

React 체크박스 체크값 여부

1개의 답변

Q&A 목록