React checkbox 관리하기

카카오 쇼핑하기를 구현하면서, 체크박스를 어떻게 관리하는 것이 효과적일까? 하는 생각이 들었다.

체크박스를 사용하는 상황은 다음과 같았다.

- 전체 동의의 체크 상태에 따라서 나머지 2개도 체크가 적용 / 해제
- 나머지 2개의 체크 상태에 따라서 전체 동의도 체크 적용 / 해지

- 전체 동의가 되어있지 않다면 결제하기 버튼 클릭 불가

대충 이 정도의 구현이 필요한 상황이었다.

 

구현만 놓고 보면 매우 간단하지만, 어떻게 구현하는 게 더 효과적일까 하는 궁금증이 있었다.

 

첫 번째로 떠올린 것은 다음과 같았다. 

  const checkAllRef = useRef();
  const checkPaymentRef = useRef();
  const checkPrivacyRef = useRef();

  const handleCheckAllChange = () => {
    const checkAllChecked = checkAllRef.current.checked;
    checkPaymentRef.current.checked = checkAllChecked;
    checkPrivacyRef.current.checked = checkAllChecked;
  }

  const handleCheckChange = (e) => {
    checkAllRef.current.checked = checkPaymentRef.current.checked && checkPrivacyRef.current.checked;
  }
  
  /* 결제 버튼 */
  const handleOnClick = async () => {
    if(checkAllRef.current.checked === false) {
      alert("약관에 동의해주세요.");
      return;
    }
    try {
      const res = await orderProducts();
    } catch (e) {
      alert('장바구니가 비어있는지 확인해주세요');
    }
  }
  
  /* ... */
  
  <div className="border">
    <div className="font-bold text-xl border-b py-5 px-3">
      <input type="checkbox" ref={checkAllRef} id="checkAll" onChange={handleCheckAllChange} />
      <label htmlFor="checkAll">전체동의</label>
    </div>
    <div className="p-3">
      <input type="checkbox" ref={checkPaymentRef} id="checkPayment" onChange={handleCheckChange} />
      <label htmlFor="checkPayment">구매조건 확인 및 결제 진행 동의</label>
    </div>
    <div className="p-3">
      <input type="checkbox" ref={checkPrivacyRef} id="checkPrivacy" onChange={handleCheckChange} />
      <label htmlFor="checkPrivacy">개인정보 제3자 제공 동의</label>
    </div>
  </div>

useRef로 요소를 하나하나 찍어와서 관리하는 방법이다.

체크박스 변경과정에서 리랜더링은 이뤄지지 않는다.

당연히 잘 작동했으나, 체크박스 하나가 더 늘어난다면 추가해야 할 코드가 꽤 늘어난다는 문제가 있다. (handleCheckChange, handleCheckAllChange가 더러워질 수 있다.)

 

그래서 확장성에 좋은 다른 방법을 떠올려봤다.

const [checkboxes, setCheckboxes] = useState([
    { id: "checkAll", label: "전체동의", checked: false },
    { id: "checkPayment", label: "구매조건 확인 및 결제 진행 동의", checked: false },
    { id: "checkPrivacy", label: "개인정보 제3자 제공 동의", checked: false },
    // 필요에 따라 체크박스 추가 가능
  ]);

  const handleCheckAllChange = (event) => {
    const checkAllChecked = event.target.checked;
    setCheckboxes((prevCheckboxes) =>
      prevCheckboxes.map((checkbox) => ({ ...checkbox, checked: checkAllChecked }))
    );
  };

  const handleCheckChange = (event) => {
    const { id, checked } = event.target;
    setCheckboxes((prevCheckboxes) =>
      prevCheckboxes.map((checkbox) => (checkbox.id === id ? { ...checkbox, checked } : checkbox))
    );
  };

  const handleOnClick = async () => {
    if (!checkboxes[0].checked) {
      alert("약관에 동의해주세요.");
      return;
    }
    try {
      const res = await orderProducts();
    } catch (e) {
      alert("장바구니가 비어있는지 확인해주세요");
    }
  };
  
  /* ... */
  
   <div className="border">
    <div className="font-bold text-xl border-b py-5 px-3">
      <input
        type="checkbox"
        id={checkboxes[0].id}
        checked={checkboxes[0].checked}
        onChange={handleCheckAllChange}
      />
      <label htmlFor={checkboxes[0].id}>{checkboxes[0].label}</label>
    </div>
    {checkboxes.slice(1).map((checkbox) => (
      <div key={checkbox.id} className="p-3">
        <input
          type="checkbox"
          id={checkbox.id}
          checked={checkbox.checked}
          onChange={handleCheckChange}
        />
        <label htmlFor={checkbox.id}>{checkbox.label}</label>
      </div>
    ))}
  </div>

첫 번째 방법과 작동 방식은 거의 유사하다.

 

체크박스 자체를 상태로 관리한 점이 좋았다.

체크박스를 컴포넌트로 바꿔서 상태의 초기값을 props로 넘겨줘서 관리하기에 쉬워지는 장점이 있었다.

반복되는 map 함수에서 가독성이 아주 살짝 떨어질 수 있다는 단점이 있지만, 항목이 늘어날 경우에도 대응이 매~~우 쉽다는 장점이 있다.

그러나 리랜더링이 매번 이뤄진다.

 

나는 첫 번째 방법으로 완성했다.

결제 과정에서 체크해야할 항목은 딱히 변화하지 않을 것 같다는 것이 이유였다.

 

내 결정이 옳았는지는 모른다.

이번주 코드리뷰에서 멘토님께 여쭤보는 편이 좋을 것 같다.