일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
- SCSS forward
- KDT 프로그래머스 데브코스 프론트엔드
- 프로그래머스 데브코스
- 리액트
- git 같은계정 다른 컴퓨터
- vue mixin
- 다른컴퓨터에서 git사용
- postcss
- 이벤트 수식어
- 리스트 렌더링
- react next
- SCSS use
- KDT 프로그래머스
- intersection opserver
- 고양이 사진 검색기
- nextjs사용법
- SCSS import
- vuex map
- vue 지역 컴포넌트
- Spacer
- netlify redirect
- vue 이벤트 수신
- 쌓임맥락
- flex
- 폼 입력 바인딩
- 프로그래머스 데브코스 프론트엔드
- SCSS extend
- Vue
- 프로그래머스 K_Digital Training
- 프로그래머스 프론트엔드 데브코스
- Today
- Total
혼자 적어보는 노트
[React] Checkbox 상태 관리하기 본문
장바구니 기능 작업을 하면서
체크박스를 이용해 상품을 체크하고
체크한 상품의 데이터를 담는 코드를 짜야 했다.
체크박스를 구현하기 위해 필요한 것은 무엇일까?
1. 체크가 되어있는 input이 무엇인지 알아야 한다.
( 체크가 된 input클릭 시 체크 해제 / 체크 해제가 된 input 클릭 시 체크)
2. 체크가 될 경우 해당 데이터를 checkedItems라는 state에 추가 / 반대 시 해당 데이터 제거
input의 checked속성
<input type="checkbox" checked={true}/>
위와 같이 checkbox input은 cheched속성을 가지고 있으며 true와 false로 조작이 가능하다.
일단 체크된 item의 데이터를 추가하는 함수를 만들어보자
Cart.js의 일부
const [checkedItems, setCheckedItems] = useState(new Set());
function handleCheckedItems(id, isChecked) {
if (isChecked) {
checkedItems.add(id);
setCheckedItems(checkedItems);
} else {
checkedItems.delete(id);
setCheckedItems(checkedItems);
}
console.log(checkedItems);
}
데이터의 id값과 체크 상태를 인자로 받아서
체크가 되면 데이터를 담고 uncheck면 데이터를 삭제하는 방식이다.
데이터 중복방지를 위해 set로 구성되어있다.
{cartData.map((item) => (
<CartList
//..생략
handleCheckedItem={handleCheckedItem}
/>
))}
해당 함수를 map으로 구성해놓은 CartList에 props로 전달해준다.
CartList.js의 일부
const [listChecked, setListChecked] = useState(false);
const { handleCheckedItems } = props;
const handleChecked = (e) => {
setListChecked(!listChecked);
handleCheckedItems(id, e.target.checked);
};
...생략
<input
type="checkbox"
checked={listChecked}
onChange={(e) => handleChecked(e)}
/>
listChecked state를 이용하여 default를 false로 설정해 놓은 후 input의 checked에 넣는다.
handleChecked라는 함수를 만들어
클릭할 때마다 체크된 값의 반대로 state가 변경되게 처리한 후
props로 전달받은 함수에 값을 전달하여 호출한다.
하지만 이것은 id값만 담기에 적합하며 조금 더 응용 버전이 필요하다.
new Set()가 아닌 cartList의 id값을 비교해서 추가/제거하는 방식
// Cart.js일부 수정
function handleCheckedItems(data, isChecked) {
if (isChecked) {
setCheckedItems([...checkedItems, data]);
} else {
setCheckedItems([...checkedItems].filter((item) => item.id !== data.id));
}
}
// CartList.js 일부 수정
const handleChecked = ({ target }) => {
setListChecked(!listChecked);
handleCheckedItems({ id, price, image, quan }, target.checked);
};
handleCheckedItems함수에 id가 아닌 data인자를 받아오고
체크 시 기존 checkeditems에서 받아온 data를 추가해주고
언 체크 시 filter을 이용하여 기존 checkedItems중에서 받아온 데이터의 아이디 값이 같은 것만 빼고
새로 저장을 해준다.
'React' 카테고리의 다른 글
[React]react에서 redux connent 코드 간소화 (0) | 2021.12.08 |
---|---|
[React] select 사용하여 option구현 (장바구니옵션) (0) | 2021.12.05 |
[React] input에 숫자만 출력하기 / 한글입력 오류 해결 (0) | 2021.11.26 |
[React] react hooks를 사용한 ScrollToTop / 페이지 이동 시 스크롤 상단으로 초기화 (0) | 2021.11.25 |
[React] useRef hook (0) | 2021.11.19 |