[트러블 슈팅] drop‐down이 suspense fallbackrender 시 사라지지 않는 문제 - 100-hours-a-week/4-bull4zo-fe GitHub Wiki

drop-down이 suspense fallbackrender 시 사라지지 않는 문제

🐞 에러 내용

• drop-down으로 그룹을 선택하면 tirgger와 함께 닫혀야 하지만, 트리거만 닫히고, 그룹다운 radio가 닫히지 않고, 해당 그룹 데이터의 fetch가 완료되면 닫히는 문제

🔍 원인 분석

• 원래 suspense의 fallbackrender 컴포넌트가 렌더링 되면서 사라져야 하지만, drop-down이 protal로 개발되어 root 바깥에서 렌더링 되기때문에, suspense와 전역상태에 영향을 받지 않아. 상태가 변경되어도 사라지지 않고, 데이터 fetch가 완료되어 페이지 재 렌더링이 발생해야 사라지게 되었다.

✅ 해결 방법

• 기존 component/ui/dropdown의 radio가 포함된 Content 영역을 기존 protal설정을 제거하거나, boolean옵션으로 값을 받아서, 일반 컴포넌트 vs protal컴포넌트 설정이 가능하도록 확장하는 방법이 존재했다.
• 하지만, 현재 dropdown은 한 공통 컴포넌트로 사용되며, protal이 필요하지 않다고 판단되어 설정을 제거하는 방향으로 개편했다.
• 추가로, 현재 선택된 그룹이 아닌, 첫번재 그룹으로 자동 포커싱이 이동하는 부분을 사용자 피드백을 받아 개편하는 과정에서 onOpenAutoFocus라는 옵션이 존재하지만, ts 설정 파일의 누락으로 타입에러가 계속해서 발생해서, content에서 전달받을 수 있는 인자로 타입 확장을 진행했다.

const DropdownMenuContent = ({
  className,
  sideOffset = 4,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Content> & {
  onOpenAutoFocus: (e: any) => void
}) => {
...
}

🤔 향후 대응 방안

• 추가적인 dropdown이 필요하고, protal이 필요하다면 props를 통한 일반 렌더링, protal로 조절이 가능하도록 확장이 가능하다.

💬 회고

• react의 protal설정과 컴포넌트에 대해서 학습할 수 있었다.