BeerBnB 프로젝트 돌아보기

BeerBnB 영상으로 확인하기

1. BeerBnB를 통해 배운 점

Modal

export const ModalContainer = styled.div`
  ${mixin.flexSet}
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
`;

export const ModalWrapper = styled.div`
  width: 100%;
  max-width: 568px;
  max-height: 100%;
  overflow: scroll;
  border-radius: 12px;
  box-shadow: rgba(0, 0, 0, 0.28) 0px 8px 28px;
  background: ${({ theme }) => theme.backgroundColorWhite};
`;

이번에 로그아웃 및 회원가입 기능을 만들면서 모달창을 만드는 것을 할 수 있었다. X버튼을 누르면 닫아지는 기능을 구현했는데 다음 번에는 특정한 버튼이 아닌 윈도우창 어느 부분을 눌러도 닫아지는 기능을 추가하고 싶다. 그리고 모달이 나타날 때 transition도 신경쓰도록 하자.

모달창 만들기는 생각보다 간단했다. 가장 바깥의 container의 포지션을 fixed로 하여 부모에 종속시키지 않고 그 내부의 wrapper를 가운데로 정렬시켜 원하는 내용을 채워가면 된다.

2-1. 기억하고 싶은 코드 - Modal 닫기 기능

export default function ProfileDetail() {
  const toggleLogin = () => {
      setIsLoginActive(!isLoginActive);
    };
  
  return (
    <PoppedProfile>
      <GoTab onClick={toggleLogin}>로그인</GoTab>
      {isLoginActive && <LoginModal toggleLogin={toggleLogin} />}
    </PoppedProfile>
  )
}

export default function LoginModal({ toggleLogin }) {
  return (
    <div onClick={toggleLogin}>{NavSvg.modalClose}</div>
  ) 
}

이전에는 부모에서 자식으로 props를 넘길 때 값만 넘겨주었는데 함수도 넘겨줄 수 있다는 것을 알았다. 그래서 모달창 닫기 기능을 구현하기 위해서 상태값을 반대로 만들어주는 함수를 넘겨주었고 모달 클릭시 isLoginActive가 false로 되어 창을 닫을 수 있게 되었다.

2-2. 미해결한 코드 - 연결된 이벤트 실행

searchBox.js의 게스트 추가를 클릭하면 toggleGuest함수가 실행되고 isGuestActive의 값이 바뀌면서 가 불리는 구조이다.

문제는 searchBox.js의 클릭이벤트가 발생하면 가 불리면서 그 내부의 onClick도 실행된다는 것이다. 일단 Guest.js에서 클릭이벤트에 e.stopPropagation을 넣어봤는데 is not a function이라는 오류가 생겼다.

3. BeerBnB를 하면서 아쉬웠던 점

여러개의 input 상태 관리하기

회원가입창을 만들 때 어쩔 수 없이 input이 많아지게 되는데 모든 input의 상태값을 useState와 onChange로 관리하다 보니 반복되는 코드가 여러 개 생기는 것 같은 느낌을 받았다.

이를 깔끔하게 바꿀 수 있는 방법은 input에 name을 설정하고 이벤트가 발생했을 때 이 값을 참조하는 것이다. 이에 따라 useState에서는 문자열이 아니라 객체 형태의 상태를 관리해주어야 한다.

to be continue...