모달 등장시 외부 배경 스크롤 현상

[hyeone22]

모달 등장시 외부 배경 스크롤 현상

문제 상황

1. 모달이 열릴 때 배경 스크롤이 여전히 동작하는 문제

고민 과정

1. 스크롤 제어 방식 선택

   • overflow: hidden만 사용

     • 장점 : 구현 간단
     • 단점 : iOS에서 동작 안함, 스크롤 위치 유실

   • position: fixed 방식

     • 장점 : 크로스 브라우징 지원, 스크롤 위치 보존
     • 단점 : 구현 복잡
     • 채택 이유 : 사용자 경험 우선, 모든 환경 지원 필요

2. 훅 분리 결정

   • 컴포넌트 내부 구현 vs 커스텀 훅
   • 채택 이유
     • 여러 모달에서 재사용 필요
     • 관심사 분리 원칙 준수

3. useLayoutEffect vs useEffect

   • useEffect

     • 장점 : 비동기 실행으로 성능 부담 적음
     • 단점 : 깜빡임 현상

   • useLayoutEffect

     • 장점 : 동기 실행으로 시각적 일관성
     • 단점 : 성능 영향 가능성
     • 채택 이유 : 사용자 경험상 깜빡임이 더 큰 문제

근거

1. useRef 사용

   • useState 대신 useRef 선택 이유
     • 스크롤 위치는 렌더링과 무관
     • 불필요한 리렌더링 방지
     • 값 보존 필요

2. useCallback 적용

   • 함수 재생성 방지
   • 의존성 배열 최적화
   • 자식 컴포넌트 리렌더링 방지

3. Portal 사용

   • z-index 관리 용이
   • 모달의 독립적 렌더링 보장
   • 접근성 고려

개선 효과

1. 사용자 경험

   • 모든 브라우저에서 일관된 동작
   • 스크롤 위치 정확한 보존
   • 시각적 버그 제거

2. 개발 경험

   • 명확한 인터페이스
   • 재사용 용이
   • 테스트 작성 가능

3. 성능

   • 불필요한 리렌더링 방지
   • 메모리 누수 방지
   • 렌더링 최적화