💁 체크박스 전체선택 기능

1차 프로젝트가 끝난게 엊그제 같은데 벌써 2차 프로젝트의 1차 스프린트가 끝이 났다... 1차 프로젝트를 하며 막 클래스형 컴포넌트에 익숙해졌다고 생각했는데 2차로 오면서 함수형으로 바꾸는 것에 익숙해지는데에 시간이 조금 걸린 것 같다.

하여간 거두절미하고 오늘은 지금껏 구현한 기능들 중 하나를 소개하려고한다. 바로바로... 체크박스!!!

체크박스의 늪에 빠지다

바로 이렇게 생긴 것인데... 시작하기 전에는 우리가 일상적으로 사용하는 기능인만큼 세상 단순한 것이라 생각하고 레이아웃 구현 단계에서도 빼놓고 구현하는 등... 너무나도 큰 착각을 하고 있었다.

(첫번째 체크박스를 클릭하면 아래 두 체크박스도 모두 선택되어야 한다.)

그런데 문제가... 생각보다 다양한 경우의 수가 존재한다는 것이다.
1, 2번 버튼 중 하나만 선택된 상태에서도 전체선택 버튼을 클릭하면 나머지 하나도 선택되어야하고, 세 버튼이 선택된 상태에서 하나만 해제되어도 전체 선택 버튼이 해제되어야한다는 것이다...!!! ㅂㄷㅂㄷ

체크박스의 늪에서 나오는 방법

첫번째 해결방법

setState를 활용하여 두개의 state값을 줬다. 1, 2번 버튼의 상태값을 boolean값으로 줬고, 세 버튼에 모두 onClick 이벤트를 줘서 이를 해결하려고 했다. 그런데 전체선택 버튼을 클릭했을때, 나머지 두 버튼의 boolean 값이 바뀌는 방식을 취했더니 하나만 선택되었을때 전체선택버튼을 클릭하면 1, 2번이 번갈아가며 선택되는 기이한 모습을 띄게 되었다...

두번째 해결방법

두번째 해결방법은 첫번째보다 덜 원시적인 방법을 택했다. 그리고 연욱님의 조언에 따라 전체선택 버튼에 대한 state 값을 주지 않고, checked 속성을 통해 이를 해결할 수 있었다. 이 기능에 한해 state값은 하나로 충분해졌다.

그렇다면 어떻게 문제를 해결할 수 있을까? 일단 state값으로 boolean 값이 아닌 빈배열을 주고, 1, 2번 버튼이 클릭될때마다 이 버튼들의 이름 속성이 배열안에 push되도록 한다. 그리고 그 배열의 길이로 전체선택버튼이 선택될지의 여부를 정해야한다.

이 기능의 기본적인 구조는 아래와 같다.

1. 전체선택 버튼이 클릭됐을 때 전체선택버튼, 1, 2번 버튼이 선택/선택해제되어야한다.
2. 전체선택 된 상태에서 1 또는 2번버튼을 클릭하면 클릭된 버튼과 함께 전체선택 버튼도 선택해제가 되어야한다.
3. 1 또는 2가 선택된 상황에서 전체선택 버튼을 클릭하면 세 버튼이 동시에 선택되어야한다.

const SignUp = () => {
  const [checkList, setCheckList] = useState([]);
  
   // 체크박스 전체선택시 모두선택 체크박스 활성화시키기
  const handleCheck = e => {
    e.target.checked
      ? setCheckList([...checkList, e.target.name])
      : setCheckList(checkList.filter(el => el !== e.target.name));
  };

  // 전체체크 선택시 전체 선택 or 전체해제
  const checkAll = e => {
    e.target.checked ? setCheckList(['terms', 'privacy']) : setCheckList([]);
  };
  
return (
  <Label>
    <div>
      <input
        type="checkbox"
        name="checkAll"
        onChange={checkAll}
        checked={checkList.length === 2 ? true : false}
        />
        아래 내용에 모두 동의합니다.
    </div>
   </Label>
   <Label>
     <div>
       <input
          type="checkbox"
          name="terms"
          onChange={handleCheck}
          checked={checkList.includes('terms') ? true : false}
        />
 		 [필수] 이용약관 동의
   	 </div>
  		<div className="showMore">상세보기</div>
  	</Label>
  	<Label>
    	<div>
          <input
            type="checkbox"
            name="privacy"
            onChange={handleCheck}
            checked={checkList.includes('privacy') ? true : false}
            />
  		[필수] 개인정보 수집 이용 동의
          </div>
        <div className="showMore">상세보기</div>
 	 </Label>
  )
}

여기서 포인트는 스프레드연산자를 이용하여 이전 배열을 불러왔다는 것과 filter 메서드를 사용하여 체크가 해제되었을 때 배열에서 해당 버튼의 이름을 배열에서 제외시킨다는 점이다.

또한 전체선택버튼의 선택여부를 결정짓기 위해 배열의 길이를 도입했다.

느낀 점

막상 해결하고 나니 뭔가 시원섭섭하기도 하고, 별거 아닌 기능에 너무 오래동안 매달려 삽질을 했나 싶기도 하다. 그렇지만 이전에 비교적 사용해본 빈도가 적은 스프레드 문법이나 filter기능을 활용할 수 있어서 좋았다.

한편으로는 이보다 더 좋은 방법이 많이 있을거라는 생각도 든다. 버튼이 두개보다 더 많을 경우 어떻게 접근해야할지 막막하기도 하다. 보다 일반적으로 적용될 수 있는 방법을 찾고 싶다.