[React] 체크박스 전체선택, 전체선택 시 버튼 활성화 기능

 

이런 화면을 만들고자 하였다!!
 
 
 

step1. 체크박스 전체선택 구현하기

- 단일 체크박스 두 개를 모두 체크하면, 전체선택 체크박스 체크
- 전체선택 체크박스를 체크하면, 단일 체크박스 두 개 모두 체크

 
 

[JavaScript]자바스크립트 체크 박스 선택,해제 시 버튼 활성화,비활성화(회원 가입,약관 동의) 예제

ㄴ 이건 html, js로 만든 것이기 때문에 복붙으로 구현 되는 것 확인하고
코드만 꼼꼼히 읽고 패스 =3
 
다른 많은 글들을 읽었지만 
나의 부족으로 이해가 어려웠고 그 끝에 최고의 글 발견! 두둥))
 

React 체크박스 전체 선택/해제 기능 구현하기

대박 친절한 설명....
 
거의 복붙하고 css만 직접 추가한 정도로 수정하였다..
구현하고도 저거 작성해주신 분 계신 방향으로 절 하고 싶은 심경이었다🙇🏻‍♀️🙇🏻‍♀️🙇🏻‍♀️
적어도 코딩에선 모방이 성장의 어머니...맞겠죠......?ㅠㅠㅜ 
 
 

step2. 전체 선택되면 다음버튼 활성화 구현하기

1) 단일 체크박스 두 개를 모두 체크하면, 다음버튼 활성화
2) 전체선택 체크박스를 체크하면, 다음버튼 활성화
3) 두 개의 단일 체크박스 중 하나라도 체크가 안 되었을 경우, 다음버튼 비활성화

 
* 체크된 체크박스를 담을 배열을 관리하는 state

const [checkedItems, setCheckedItems] = useState([]);

* NextBtn 활성화 상태를 관리하는 state

const [isNextBtnDisabled, setIsNextBtnDisabled] = useState(true);

 
1) 단일 체크박스 두 개를 모두 체크하면, 다음버튼 활성화

// 체크박스 단일 선택
const handleSingleCheckbox = (checked, id) => {
if (checked) {
  setCheckedItems(prev => [...prev, id]);
} else {
  setCheckedItems(checkedItems.filter((el) => el !== id)); 
}
};

2) 전체선택 체크박스를 체크하면, 다음버튼 활성화

// 체크박스 전체 선택
const handleAllChecked = (checked) => {
if (checked) {
  // 전체 선택 클릭 시 데이터의 모든 아이템(id)를 담은 배열idArray로 checkItems 상태 업데이트
  const idArray = data.map((el) => el.id);
  // data.forEach((el) => idArray.push(el.id));
  setCheckedItems(idArray);
  // 전체 선택 시 NextBtn 활성화
  setIsNextBtnDisabled(false);
} 
else {
  setCheckedItems([]);
  // NextBtn 비활성화
  setIsNextBtnDisabled(true);
}
};

 
3) 두 개의 단일 체크박스 중 하나라도 체크가 안 되었을 경우, 다음버튼 비활성화

// 체크된 아이템이 두 개 모두 있을 경우 NextBtn 활성화, 하나라도 체크가 안 되었을 경우 비활성화
useEffect(() => {
setIsNextBtnDisabled(checkedItems.length !== 2);
}, [checkedItems]);

 
 
다음 버튼은 다음과 같이 만들었다.

<NextBtn className="GoNextBtn" disabled={isNextBtnDisabled}> 다음 </NextBtn>

const NextBtn = styled.button`
  box-shadow: none;
  width: 416px;
  height: 48px;
  background-color: #ffc000;
  border: 1px solid #ffc000;
  border-radius: 4px;
  cursor: pointer;

  &:disabled {
    cursor: not-allowed;
    opacity: 0.7;
  }
`

 
 
 

---

사실 내 힘으로 짠 코드가 하나도 없는 것 같아 마무리하고도 마음이 조금 찝찝하다..ㅜ
그래도 복붙한 코드를 어느정도 이해하였고,
또 내가 원하는 모습으로 수정하여 결국 끝을 내었다는 점에서 그나마 다행이라고 생각한다. 
 
오늘 만든 부분을 하기 전까진 버튼 태그에 disabled 속성이 있는지도 몰랐고
cursor: not-allowed와 cursor: none의 차이도 몰랐다.
작지만 직접 만들어보지 않았다면 머릿속에 쉽게 각인되지 않았을 기능들이었다고 생각한다.
 
동그란 체크박스 만드는 방법도 익혔고 말이다.ㅎㅎ  (👇👇내가 쓴 글임^^)

[CSS] 동그란 체크박스 만들기

 
 
 
뛰어난 팀원분들 사이에서 큰 도움이 되지 못하는 것 같아
넘 속상하고 아쉽고 죄송하고 힘든 하루하루지만
언젠가 나도 나같은 팀원을 만났을 때 먼저 도움의 손길을 내밀어줄 수 있는 사람이 되어있길 기대해보며
 
오늘 하루 끝!!!!!!