c-h-w-h/cds

Refactor: Dropdown 리팩토링

prayinforrain opened this issue · 3 comments

prayinforrain commented

♻️ 리팩토링 사항

  • 03/13 회의 내용에 따라 드롭다운 컴포넌트를 다시 만들어요.

📖 참고 사항

대충 아래와 같은 사용 방식을 갖게 하고 싶어요.

<Dropdown>
    <Dropdown.Trigger>
        <Button>트리거에용~</Button>
    </Dropdown.Trigger>
    <Dropdown.Menu>
        <Container>
            버튼을 누르면 보이는 부분이에용~~
        </Container>
    </Dropdown.Menu>
</Dropdown>

무수히 많은 레퍼런스들을 읽고 컴파운드 컴포넌트 패턴을 적용해볼 생각이에요.

왜 Dropdown.List라고 이름지었냐면 얘가 그랬어요
image
(03/17) 리스트가 별로라는 피드백이 있어서 메뉴로 바꿨어요~

prayinforrain commented

오전에 세영님과 상담(?) 했는데 내용 기록용으로 달아둘게요.

문제

  1. Trigger 자체에 onClick 이벤트를 바인드하고싶음
    그러면서 Trigger의 최상위 컴포넌트를 고정하고싶지 않음
    -> 이 두가지를 모두 만족시킬 수 있는 구조가 없을까?
    이거 세영님이랑 이야기할때는 그냥 Trigger를 스타일을 제거한 _button element_로 감싸는 쪽으로 구현한다고 했었는데 막상 해보니까 children에서 _button element_가 오는 경우 경고가 나타나요.
    image
    찾아보니 접근성 권고사항같은데, 다른 방법을 찾던가 타협을 봐야 할 것 같아요..

  2. 조건부 렌더링 까지 적다가 답을 발견해서 해결함

일반적으로 넣을 수 있는 드롭다운의 기능이 뭐가 있을까

  • 트리거
  • 바깥을 클릭했을 때 드롭다운이 토글되어야 하는지?
    • window에 이벤트리스너 바인딩?? -> 이거 코드 더러워서 고민중이에요
      • 이거 관련해서, Trigger를 클릭하면 document의 onClickEvent가 Trigger 이벤트의 앞뒤로 일어나서 바로 닫히는 문제가 생기는 것 같아서 Trigger에 stopPropagation() 달아주려고 하는데 문제 없을지 생각중이에요
  • 드롭다운 리스트를 아예 일정한 형태를 정의할까?
    • 약간 Title을 포함한 div로 감싸는 식으로
    • children을 content부분에 넣기
    • 일케하면 어느정도 형태를 고정할 이유(?)가 생김
    • 디자인이 좀 잡히면 수정하기로 하고 일단 메뉴로 지정된 컴포넌트만 딱 보여주는 것으로
  • 👍1
se030 commented

우재님 로그를 엄청 세세하게 남겨두시네요 👍🏻

button 속에 button이 들어가는건 너무 안되는 일이긴 하네요 ...ㅋㅋㅋㅋ ㅠㅠ
사용할 때 시맨틱 상으로 Trigger 요소는 버튼으로 넣고싶은 경우가 많을 것 같은데, 다른 방법을 생각하는게 좋지 않을까요?

cloneElement 말하려고 찾아보니까 레거시 됐어요. 그리고 alternative 중에서 여기에 사용할 수 있는건 없어보이네요 ...
https://react.dev/reference/react/cloneElement
https://react.dev/reference/react/cloneElement#passing-data-with-a-render-prop

div에 role button, tabIndex 넣고, 필요한 aria 속성 공부해서 써보기 ..? > 그치만 이것도 내부에 버튼있으면 이슈가 있을 것 같아요.. 뭔가 잘 사용하면 .. 원하는대로 할 수 있을지도 모르겠지만 ....

사용되는 애들 안건드리고 이 안에서 해결해야해서 엄청 어렵네요 ... 좋은 생각이 나면 적으러 올게요 아직은 안나요 ...


최상위 컴포넌트를 고정하고싶지 않음

근데 이건 무슨 의미인가요 ???

이거 관련해서, Trigger를 클릭하면 document의 onClickEvent가 Trigger 이벤트의 앞뒤로 일어나서 바로 닫히는 문제가 생기는 것 같아서 Trigger에 stopPropagation() 달아주려고 하는데 문제 없을지 생각중이에요

Trigger 리스너에서 잡히고, document 리스너에서 또 잡히는거죠? 의도가 Trigger 외부를 클릭하는 경우만 잡아내고 싶은거니까 문제 없을 것 같은데 뭔가 부작용이 있을까요 ..?

prayinforrain commented

최상위 컴포넌트를 고정하고싶지 않음

button 중첩이랑 비슷한 문제에요 ㅋㅋ.. 오전에 보여드렸던 Menu와 List가 모두 Fragment로 감싸져 있는데 이걸 결국은 div든 button이든 실제 element로 교체하게 될 것 같아서요

stopPropagation은 그냥 막연하게 '이렇게하면 언젠가 사용자가 이벤트 관련된 로직을 짤때 이것때문에 문제가 생길 일이 있을까?' 하는 생각이였어요. 혼자 보려고 적은거라 엄청 뜬구름 잡는 표현으로 적었네요 ㅎㅎ;