TIL_57_2차 프로젝트 모달창

2차 프로젝트에서 맡은 사이트는 KREAM!

나는 로그인/회원가입 그리고 네브 바와 검색창을 맡았다.

우리는 흐림 HEUREAM 이란 이름으로 클론을 진행하게 되었따.

회원가입 페이지를 보면, 사이즈를 선택할 시 사이즈 선택 모달창이 띄워진다. 모달창을 한번도 시도해본 적이 없었어서 모달창 관련하여 코드를 정리해보겠다.

//Join.js
class Join extends React.Component {
  constructor() {
    super();
    this.state = {
      email: "",
      pw: "",
      modalOn: false,
    };
  }

함수형 컴퍼넌트로 진행하였어야 하는데.. 일단 클래스형으로 진행한 뒤에 함수형으로 수정을 해보려고 한다.
this.state 에 modal창이 띄워질 때는 true, 디폴트 값은 false 로 주었다.

//Join.js
handleModal = () => {
    this.setState({ modalOn: !this.state.modalOn });
  };

handleModal 이라는 함수를 생성 -> ture, false 따로 함수를 두 개 만들 필요없이 함수 하나로 진행될 수 있도록 지정해주었다.

//Join.js
<ButtonInputBox>
          <InputTitle>스니커즈 사이즈 (선택)</InputTitle>
          <Modal handleModal={this.handleModal} modalOn={this.state.modalOn} />
          <InputTxt
            type="text"
            placeholder="선택하세요"
            onClick={this.handleModal}
          />
        </ButtonInputBox>

모달창 컴퍼넌트에, 위에서 생성해준 함수 handleModal 과 this.state 값을 props로 보내준다.
그리고 클릭했을 때 함수가 실행될 수 있도록 지정해주었다.
참고로, styled Component로 진행 중이다.

//Modal.js
class Modal extends React.Component {
  render() {
    return (
      <>
        {this.props.modalOn ? (
          <WrapModal onClick={this.props.handleModal}>
            <ModalContainer>
              <LayerHeader>
                <Title>사이즈 선택</Title>
              </LayerHeader>
              <LayerContent>
                <SizeList>
                  <SizeItem>
                    {SIZE.map(size => (
                      <ItemBtn id={size.id} key={size.id}>
                        {size.size}
                      </ItemBtn>
                    ))}
                  </SizeItem>
                </SizeList>
                <LayerBtn>
                  <Button onClick={this.props.handleModal}>확인</Button>
                </LayerBtn>
              </LayerContent>
            </ModalContainer>
          </WrapModal>
        ) : null}
      </>
    );
  }
}

나는 모달창 바깥 영역을 클릭했을 때도 모달창이 닫혔으면 해서, 조건문을 최상단에 써주고, 온클릭 이벤트를 지정해주었다. 클래스형으로 진행하다보니, 생각보다 간단하게 적용할 수 있었는데 함수형으로 수정하게 되면 좀 더 어렵지 않을까 싶다.