MyLifePlaylist💖 전체 모달창 상태 로직 수정, 스타일링 개선

🙌 github commit 🙌

refactor: change state logic, rendering position and modal-event, sty… · hahagarden/project-machine@9a975fa

 

 

1. 전체 모달창 로직 수정

🩹 초기구현

MyLikes프로젝트에 모달창이 3종류 있다. 카테고리 추가창(addCategoryModal), 리스트 등록창(RegisterModal), 리스트 수정창(UpdateModal).

초기에 모달창을 켜는 상위컴포넌트, 모달창을 그리는 컴포넌트 두 개에서 모달에 대한 상태가 공통적으로 사용되어 전역상태로 관리하였다. 켜지면 true, 꺼지면 false였다. 그런데 부모-자식 관계이고, props로 한 번만 넘겨주면 되어 복잡하게 recoil 라이브러리의 전역상태를 쓰기보다는 useState를 쓰려고 한다.

또한 전체적으로 상태이름과 핸들러 이름들이 통일성이 없어서 이름도 수정했다.

 

🔨 수정

부모	자식	useState
Mylikes	AddCategoryModal	[isModalOn, setIsModalOn] = useState(false)
Mylike	RegisterModal	[isModalOn, setIsModalOn] = useState(false)
Tabe	UpdateModal	[updateOne, setUpdateOne] = useState<ILike | "">("")

export interface ILike {
  id: string;
  createdAt: number;
  updatedAt: number;
  creatorId: string;
  genre: string;
  singer: string;
  title: string;
  [key: string]: string | number;
}

<UpdateModal like={updateOne} modalClose={onModalOffClick} />

UpdateModal의 경우는 상태를 boolean값이 아닌 수정할 데이터를 저장하거나 falsy한 빈 문자열 ""을 저장하도록 했다. 
다른 모달창의 경우는 boolean값으로 모달컴포넌트를 조건부 렌더링만 해주면 되는데, UpdateModal은 클릭이 되었는지 안되었는지 여부 뿐만 아니라, 어떤 데이터를 수정할지, 그리고 그 데이터를 불러와서 input들의 초기값으로 설정해주어야 하기 때문이다. 똑같이 boolean값을 저장한다면 수정할 데이터를 저장할 상태를 하나 더 추가해서 like props로 전달해주어야 할 것이다.

이벤트 핸들러 이름은 onModalOnClick, onModalOffClick, onModalOnDbClick 으로 통일하였다.

 

또한 모달컴포넌트들 렌더링 위치도 수정했다. 예를 들어 다음의 코드를 보면,

<>
    ...
    <Title>
        My Likes
        <TitleButton onClick={addCategoryClick}> + </TitleButton>
        {addCategory && <AddCategoryModal />}
    </Title>
    ...
</>

<>
    <Wrapper>
    ...
    </Wrapper>
    {addCategory && <AddCategoryModal />}
</>

처음에는 기능의 흐름에 따라, Title컴포넌트에 있는 +버튼을 클릭하면 Title컴포넌트 안에 Modal컴포넌트를 작성했다. position:fixed를 주는 등의 스타일링으로 가장 바깥 레이어에 모달창을 띄울 수는 있지만 구조상 Title의 자식컴포넌트로 있는 것이 알맞지 않아 보였다.

부모 컴포넌트에서 모달 컴포넌트를 렌더링하는 것은 맞지만, 부모의 자식 또는 후손 컴포넌트에서보다 부모 직속으로 렌더링이 되는 것이 맞다고 판단했다.

 

2. 모달창 스타일링 개선

🩹 초기구현

모달 창을 띄우고 다른 모달 창을 클릭하면 겹쳐서 모두 모달이 뜬다.

 

🔨 수정

모달창에 배경레이어를 하나 깔아주어 UI도 더 깔끔해진 것 같고 다른 버튼들이 선택되지 않게 기능도 개선되었다. 바깥 div에 onClick이벤트를 주었는데 x버튼 이외에 모달창은 onClick이벤트가 발생하지 않도록 event.stopPropagation()을 사용하였다.