글로벌 모달 재설계 공유

비고
Tags
설계
Select
recommand
결과 미리보기개요 (재설계 계기)글로벌 모달 변천사최초의 글로벌 모달스타일 변화상태 변화버튼이 컴포지션으로 변화버튼 컴포지션 형태 변경프롭의 옵셔널 변화커스텀 타이틀과, 커스텀 디스크립션 등장옵션의 추가옵션의 추가추가 변경 필요 건결론재설계 과정현재 전체 모달계층 분리수도 코드추가 고려사항예시해결 방안설계 결론설계 결과기대 효과설계 시 주요하게 고려되어야 하는 항목/기준컴포지션 제대로 이해하기컴포지션 이미 봤다?상속 보다는 합성

결과 미리보기

notion image
 

개요 (재설계 계기)

  • 변화 요구가 빈번한데, 유연하게 대응할 수 없고 항상 시간을 많이 쏟는다.
  • 수정 시마다 핵심 코드들이 영향을 받는다.
  • 알 필요 없는 부분들이 너무 많다.
    • 늘어나는 케이스 때문에 유연하게 대응시키고자 props를 열어두면서 추가하게 되는데, 엣지 케이스에 해당되는 프롭들이 늘어나는 경우가 많아 사실상 불필요한 정보로 와닿는다.
  • 로직을 파악하기 어렵다.
  • 코드 수정이 어렵다.
  • 수정된 부분 외에도 모든 케이스에 대한 테스트를 거쳐야 한다.

글로벌 모달 변천사

계속 변하고, 변하고, 변해왔는데 매번 핵심 코드에 변경이 생겼다는 점과, 엣지 케이스와 관련된 코드들까지 포함되어 간다는 느낌을 받으면서 읽어 내려가면 된다.

최초의 글로벌 모달

  • 스타일/구성 형태가 고정되어 있음.
💡
컴포넌트가 다양하게 들어올 수 있다는 것을 이미 어느정도 인지하고 ReactNode로 받고있는 프롭도 있다는 것에 주목하자.
notion image

스타일 변화

notion image

상태 변화

  • 상태에 따라 버튼이 다르게 보여야 하거나, 이용 가능 여부가 결정되어야 한다.
notion image

버튼이 컴포지션으로 변화

  • 들어올 수 있는 버튼의 형태가 다양해졌기 때문.
  • 프로그레스바가 있는 버튼이라던지, 카운트 다운이 되어야 하는 버튼이라던지, 스타일이 다르다던지 등
    • 이런 것을 다 프롭으로 계속 계속 추가 해도 되긴 하는데… 진짜 그렇게 할거야??!?
notion image
notion image
고정된 스타일이 아닌, 주어진 컴포넌트를 렌더링 하는 방식으로 변화함

버튼 컴포지션 형태 변경

  • 버튼의 개수가 더 늘어날 수 있고, 배치 형태가 달라질 수도 있음.
      • ⇒ 버튼 구성 전체를 컴포지션으로 받는 방향으로 변경됨
💡
컴포지션으로 받고 있음에도 불구하고, 글로벌 모달의 프롭이 모달의 형태를 고정시키고 있었다는 것을 깨달아야함.
notion image

프롭의 옵셔널 변화

notion image

커스텀 타이틀과, 커스텀 디스크립션 등장

  • 고정적일 거라고 생각했던 부분마저 스타일이 달라지는 경우가 생기기 시작함.
notion image

옵션의 추가

notion image

옵션의 추가

notion image

추가 변경 필요 건

  • 설치 완전회수 기능
    • 중요한 부분이라서 description의 색상을 빨간색으로 표기하고 싶다.
    • 스타일이 고정된 상태라서 description의 색상을 변경할 수 없다.
    • description의 색상을 변경하기 위해 descriptionTextColor 프롭을 또 추가할 것인가!?
notion image

결론

  • 기존의 모달 체계가 모든것을 커버하지 못한다는 이유로, 모든 것을 아우를 수 있도록 시작된 프로젝트이지만, 사실상 현재 수정/추가된 디자인을 고려한 리팩토링이었다.
  • 컴포지션으로 구성해둔 부분 마저도, 글로벌 모달의 프롭 구성에 의해 모달의 형태가 고정되는 상황이 있었다.
  • 유연하게 대응되지 않으며, 수정이 필요할 때마다 글로벌 모달에서도 수정이 필요했다.
    • 모든 모달이 영향을 받으므로 사실상 변경이 생길 때마다 모든 모달의 정상 유무를 점검해야 한다.
 

재설계 과정

💡
키 포인트 : 정말 모든 디자인 상황을 커버할 수 있으려면 어떻게 설계가 되어야 할까?

현재 전체 모달

notion image

계층 분리

notion image

수도 코드

notion image
notion image
notion image

추가 고려사항

  • 모달이 여러개 중첩될 수 있다.
  • 중첩된 상황에서 closeModal을 눌렀을 때 본인이 닫히도록 어떻게 구성할까?

예시

  • 유저가 미리조합을 하려고 미리조합 팝업이 떠있는 상태
  • 보틀이 인식돼서 보틀 인식 팝업이 위로 쌓임
  • 업데이트가 진행되면서 업데이트 팝업이 위로 쌓임
⇒ 하나라도 유저에게 정보를 생략해도 되는 정보가 없다. (팝업을 모두 유지해야함)
⇒ 모달이 떳다는 이유로 유저에게 이미 했던 행위를 또 하도록 해서도 안된다.
  • 미리조합 팝업을 정보 노출 팝업으로 교체하면 안됨
notion image

해결 방안

  • 가장 최근의 모달이 가장 위에 쌓이는 형태다.
  • 모달을 닫게되면 가장 위에 있는 모달부터 닫게 된다.
⇒ 스택 자료구조!
⇒ 모달이 중첩되어야 하는 경우에는 push를 하면 되고,
⇒ 모달을 닫아야 할 때는 pop을 하면 된다 (다른 스크린과의 상관관계를 신경쓸 필요가 없음)

설계 결론

  • 글로벌 모달은 전달받은 컴포넌트를 단순히 뷰잉 해주는 최상위 계층이다.
  • 글로벌 모달은 스택 자료구조로 중첩시킬 수 있으며, 모달을 닫는 행위는 pop으로 구성한다.
  • 소켓 모달은 어느정도 구성요소 레이아웃 정도만 픽스된 형태로, 모두 컴포지션으로 받으며, 중간 계층이다.
  • 최종 디자인 모달은 소켓모달에 컴포넌트를 자유롭게 구성해서 컴포지션하는 형태로, 가장 하위 계층이다.

설계 결과

RNGlobalModal
nightohl • Updated Mar 23, 2023

기대 효과

  • 어떠한 모달 형태가 주어져도 만들 수 있다.
  • 소켓 모달 형태를 벗어나는 모달이 주어지면, 중간 계층 컴포넌트가 추가되면 된다.
    • ex) 바텀시트 모달도 글로벌 모달로 할 거야!
  • 최상위 계층에서 정해진 룰이 변경되어야 한다면 룰을 한단계 아래 계층으로 이관하여 해결할 수 있다.
  • 특수성이 붙는 경우는 특수성이 붙는 모달에서만 해당 내용을 알고 있으면 된다.
    • 프롭 덕지덕지 X
  • 하위 계층의 내용이 바뀌어도 상위계층은 영향을 받지 않는다.
    • 코드 안정성 향상
    • 태스크 소요시간 줄어든다
 

설계 시 주요하게 고려되어야 하는 항목/기준

  • 올바른 역할과 책임의 분배가 되어야 한다. → 설계의 초석
  • 코드 변경의 이유는 하나만 존재해야 한다.
  • 상위 요소는 하위 요소에 의존하지 않는다.
    • 변경사항이나 구체적인 코드를 전혀 몰라도 돼야함

컴포지션 제대로 이해하기

컴포지션 이미 봤다?

상속 보다는 합성

클래스 상속
컴포지션
  • 상속 : is a 관계
  • 합성 : has a 관계
  • 합성을 사용한 코드를 변경하는 것이 상속을 사용한 코드를 변경하는 것보다 노력이 덜 든다.
  • is a 관계라는 것이 모호하다면 합성으로 구성하는 것이 좋다.
  • 컴포넌트 간의 커플링이 심해지는 것은 인터페이스를 통해 디커플링 하여 해결할 수 있다.
    • 의존성 역전 DIP