[Bottom Sheet - 2] 합성 컴포넌트

🧷 이전 포스트

• [Bottom Sheet - 1] 잘못된 추상화 https://presentkey.tistory.com/11

 

🚩 최종 결과물

결과물

🚩 컴포넌트 구조

Header와 Body 부분으로 분리하여 생각

• 합성 컴포넌트를 사용해 화면 구현

이를 통해 컴포넌트 재사용성을 높이는 것에 대한 공부를 할 수 있었고, 이전 게시글의 문제점을 해결할 수 있었습니다.

     - 추상화가 잘못 되어 발생한 이해할 수 없는 컴포넌트 구조와 로직들 그리고 무수히 많은 props...

     - button 영역과 form 영역이 분리되어 있는점

     - 입출금 form의 경우 input value를 공유하고 있는점

 

Main 컴포넌트에서 BottomSheet

Detail 컴포넌트에서 BottomSheet

---

🚩 BottomSheet 컴포넌트

BottomSheet 컴포넌트

2~ 15번째 줄은 BottomSheet 애니메이션 및 브라우저 resize 이벤트에 관한 로직입니다.

resize 이벤트에 throttle을 적용해 700ms마다 브라우저 사이즈를 변경하도록 했습니다.

 

BottomSheetContext

BottomSheetContext는 어떤 Form이 렌더링 되는지 결정하는 toggle 상태를 가지고 있습니다.

 

🚩 Recoil 사용

처음에는 Context안의 height 상태를 가지고 Body 부분의 높이를 계산했었습니다. Context를 통해 height 상태를 공유받으니 문제점이 생겼습니다.

 

1. useEffect를 이용해 toggle 상태가 바뀔때마다 height의 상태 업데이트

2. 버튼이 꺼질때 상태 업데이트 1번, 버튼이 켜질때 상태 업데이트 1번 -> 총 2번의 상태 변화 발생

3. 부자연스러운 애니메이션 발생

 

Context에서 height 상태를 가졌을 때

Recoil을 통해 height 상태를 관리하면서 딱 1번의 상태변화를 가져올 수 있었습니다.

---

Header 컴포넌트

children으로 button을 조합하여 각 페이지에 맞는 button을 생성할 수 있도록 했습니다.

 

Body 컴포넌트

toggle 상태에따라 Body의 height 상태를 변경하고 있습니다.

children으로 각 페이지에 맞는 Form을 조합할 수 있도록 했습니다.

 

Form 컴포넌트

ClassCreateForm

ClassAttendForm

TransferForm