[Project] 1차 프로젝트 4일차

4일차

회원가입 페이지가 메인 페이지나 다른 페이지에 비해 스타일링도 단순하고 별 거 없을 것 같앴는데 생각보다 손이 많이가고 공부할 것들이 많은 것 같다. 아무래도 아직 모르는게 많아서인 것 같다.😅

회원가입 페이지 주소 입력란에 '자택' 또는 '회사'를 선택할 수 있는 체크박스가 있다. 둘 중에 하나만 선택할 수 있어야 한다. 하나를 선택하면 나머지 하나의 체크박스는 자동으로 해제가 돼야 하고 이미 선택되어 있는 체크박스를 클릭하면 아무 변화가 없도록 만들었다.

// 회원가입 컴포넌트
class Signup extends Component{
    constructor(){
        super();
        this.state = {
            home : false,
            workplace : true
        }
    }
}
checkHome=(e)=>{
    this.setState({
        home : false,
        workplace : true
    })
}
checkWork=(e)=>{
    this.setState({
        home : true,
        workplace : false
    })
}
render(){
    const { home, workplace } = this.state; // 비구조화 할당, this.state.home을 그냥 home으로 접근가능
    return()
}

state와 '자택', '회사' <input>태그를 onClick했을 때 이러나는 함수를 만들었다.

<input id="home" className={home?"home":"home2"} onClick={this.checkHome}></input>
<label for="home">자택</label>
<input id="workplace" className={workplace?"workplace":"workplace2"} onClick={this.checkWork}></input>
<label for="workplace">회사</label>

'자택'과 '회사' 체크박스 className에 삼항연산자로 클래스네임이 변경되게 만들어 true, false일 때 각각 다른 스타일이 적용 되도록 하면 된다.

다음으로 구현할 기능은 마케팅활동에 대한 수신 동의 체크박스 기능이다. 왼쪽 sms, email, push 수신동의 체크박스는 하나하나 독립적으로 체크가 가능해야 하고 오른쪽 전체 동의 체크박스를 체크하면 왼쪽 3개 체크박스 동시에 체크되거나 해제가 되어야 한다.

<div className="checkAgree">
  <input id="smsAgree" className={smsAgree?"toggleOff":"toggleOn"} onClick={this.checkAgree} type="checkbox"></input>
  <label for="smsAgree">SMS/MMS 수신 동의</label>
  <input id="mailAgree" className={mailAgree?"toggleOff":"toggleOn"} onClick={this.checkAgree} type="checkbox"></input>
  <label for="mailAgree">E-mail 수신 동의</label>
  <input id="pushAgree" className={pushAgree?"toggleOff":"toggleOn"} onClick={this.checkAgree} type="checkbox"></input>
  <label for="pushAgree">PUSH 수신 동의</label>
</div>

로그인 페이지에서 했던 토글 기능의 함수를 쓰면 될거라 간단하게 생각했다. 하지만 각자 독립적으로 체크가 되어야 하는데 이렇게 하나의 함수로 동작시키면 하나만 체크해도 state값을 공유하게 되기 때문에 다같이 변하게 된다. 그래서 각 체크박스마다 state값을 각자 갖게하고 함수도 각자 만들어줘서 독립적으로 체크가 될 수 있게 만들었다.

        this.state = {
            smsAgree : true, // 문자 수신 동의 체크 해제
            mailAgree : true, // 이메일 수신 동의 체크 해제
            pushAgree : true, //Push 수신 동의 체크 해제
            agreeAll : true, //전체 동의 체크 해제
        } // state도 각자 하나씩 독립적으로 만들어준다.

    	checkSmsAgree = (e) => {
          this.setState({
            smsAgree : !this.state.smsAgree
          });
        }
   		
    	checkMailAgree = (e) => {
          this.setState({
            mailAgree : !this.state.mailAgree
          });
        }
        
   	    checkPushAgree = (e) => {
          this.setState({
            pushAgree : !this.state.pushAgree
          }); 
        }

이렇게 3개의 체크박스에 3개의 함수를 만들어 각자 독립적으로 움직이게 되었다.
이 과정을 거치니 전체 동의 체크박스를 클릭해서 모든 체크박스들이 다같이 체크되고 해제되는 기능을 어떻게 구현할지 어느정도 감이 왔다.

// 전체동의 체크박스 onClick 이벤트헨들러
    agreeAll = (e) => {
        this.setState({
            // 일단 전체 동의 체크박스를 클릭하면 체크되거나 해제되도록 하는 토글기능!
            agreeAll : !this.state.agreeAll,
        })
        if(this.state.agreeAll === false//만약 전체동의의 state가 체크된다면){
            this.setState({ //나머지 체크박스도 모두 체크
            smsAgree : false, 
            mailAgree : false,
            pushAgree : false
            })
        }else{ //전체동의의 state가 체크 헤제라면
            this.setState({ // 나머지 체크박스도 모두 체크 헤제
            smsAgree : true, 
            mailAgree : true,
            pushAgree : true
            })
        }
    }

이렇게 함으로써 마케팅정보 수신 동의 체크박스 기능을 추가할 수 있었다.
회원가입 페이지를 만들면서 특별히 기능은 없고 디자인만 하게 되는 것 같애서 걱정됐는데 이런 체크박스 기능을 구현해보면서 리액트와 조금씩 친해지는 것 같은 기분.. 🙂