#5. 약관동의 체크박스 기능 구현

#5-0 들어가는 말

 회원가입 페이지에 들어갈 약관동의 체크박스 기능을 구현했다. 처음엔 왠지 조금 어려울꺼 같아서 일단 혼자 시도해보고 안되면 구글링 해보자 싶었다. 근데 웬걸 성공했다. 콩나물 처럼 나도 조금씩 자라고 있나보다. 뿌듯!

 

---

#5-1 약관동의 체크박스 기능 설계

 

1) 전체동의 체크 시 세부항목 3개 모두 자동체크

2) 전체동의 체크해제 시 세부항목 3개 모두 자동 체크해제

3) 세부항목 3개 모두 체크 시 전체동의 자동체크

4) 전체동의 + 세부항목 3개 모두 체크된 상태에서 세부항목 1개

체크해제 시 전체동의 자동 체크해제

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---

#5-2 약관동의 체크박스 기능  구현

 

1) 체크박스의 checked 속성값인 true / false 를 useState를 이용하여 저장 및 변경함.
2) 기능 1번과 2번은 해당 체크박스의 onChange 이벤트를 통해 기능 구현함. (이때 onClick으로 해도 작동되긴 함)

3) 기능 3번과 4번은 useEffect를 이용해서 기능 구현함. 위의 onchange 이벤트로는 세부항목 3개가 모두 체크된 즉시 전체동의가 자동체크되지 않으나, useEffect를 사용하면 모두 체크된 때(업데이트)를 캐치해 즉시 전체동의가 자동체크된게 된다.

 

import React, {useState, useEffect}  from 'react';
import styles from './Join.module.scss';

function JoinPresenter(){

  const [allCheck, setAllCheck] = useState(false);
  const [ageCheck, setAgeCheck] = useState(false);
  const [useCheck, setUseCheck] = useState(false);
  const [marketingCheck, setMarketingCheck] = useState(false);

  const allBtnEvent =()=>{
    if(allCheck === false) {
      setAllCheck(true);
      setAgeCheck(true);
      setUseCheck(true);
      setMarketingCheck(true);
    }else {
      setAllCheck(false);
      setAgeCheck(false);
      setUseCheck(false);
      setMarketingCheck(false);
    } 
  };
  
  const ageBtnEvent =()=>{
    if(ageCheck === false) {
      setAgeCheck(true)
    }else {
      setAgeCheck(false)
    }
  };
  
  const useBtnEvent =()=>{
    if(useCheck === false) {
      setUseCheck(true)
    }else {
      setUseCheck(false)
    }
  };
  
  const marketingBtnEvent =()=>{
    if(marketingCheck === false) {
      setMarketingCheck(true)
    }else {
      setMarketingCheck(false)
    }
  };

  useEffect(()=>{
    if(ageCheck===true && useCheck===true && marketingCheck===true){
      setAllCheck(true)
    } else {
      setAllCheck(false)
    }
  }, [ageCheck,useCheck, marketingCheck])


  return (
    <form method="post" action="" className={styles.form}>
      <div className={styles.form_agreement}>
        <label className={styles.form_agreement_title}>
        	약관동의
        </label>
        <div className={styles.form_agreement_box}>
        	<div className={styles.form_agreement_all}>
        		<input type="checkbox" id="all-check" checked={allCheck} onChange={allBtnEvent}/>
        		<label for="all-check">전체동의</label>
        	</div>
        	<div className={styles.form_agreement_item}>
        		<input type="checkbox" id="check1" checked={ageCheck} onChange={ageBtnEvent}/>
        		<label for="check1">만 14세 이상입니다 <span className={styles.blue}>(필수)</span></label>
        	</div>
        	<div className={styles.form_agreement_item}>
        		<input type="checkbox" id="check2" checked={useCheck}  onChange={useBtnEvent}/>
        		<label for="check2">이용약관 <span className={styles.blue}>(필수)</span></label>
        	</div>
        	<div className={styles.form_agreement_item}>
        		<input type="checkbox" id="check3" checked={marketingCheck}  onChange={marketingBtnEvent}/>
        		<label for="check3">마케팅 동의 <span className={styles.gray}>(선택)</span></label>
        	</div>
        </div>
      </div>
      <button type="submit" className={`${styles.btn_primary} ${styles.btn_55} ${styles.btn_submit}`}>
      	회원가입하기
      </button>
    </form>
  )
}

export default JoinPresenter;