renderOnlyVisible={true} 옵션 사용 시 좌우 스크롤 시 잔상이 남는 문제

[hyojaekim]

환경

• @egjs/react-flicking: 4.14.0

문제되는 옵션

• renderOnlyVisible={true}

배경 및 이슈 요약

• 기존 egjs-react-flicking@4.10.1에서 클릭 가능한 영역에 좌우 스크롤이 되지 않는 이슈가 있었음
• 이를 해결하기 위해 4.14.0으로 업그레이드 후 아래와 같이 preventDefaultOnDrag(✅)옵션 추가함
• 클릭 영역에 좌우 스크롤은 가능하게 됐지만, 이전 잔상이 남는 현상이 발생함

<Flicking
  align={'prev'}
  ref={flickingRef}
  renderOnlyVisible={true}
  preventClickOnDrag={true}
  ✅ preventDefaultOnDrag={true}
  moveType={'strict'}
  onChanged={setButton}
>
  ...
</Flicking>

문의 내용

egjs-react-flicking@4.14.0 사용 중, renderOnlyVisible={true} 옵션 활성화되어 있으면
좌우 스크롤 중 이전 아이템의 잔상이 화면에 남는 현상이 발생하고 있습니다.

<Flicking
  align={'prev'}
  ref={flickingRef}
  renderOnlyVisible={true}
  preventClickOnDrag={true}
  preventDefaultOnDrag={true}
  moveType={'strict'}
  onChanged={setButton}
>
  ...
</Flicking>

해당 renderOnlyVisible 옵션은 현재 보이는 영역의 패널만 DOM에 렌더링하고,
스크롤 시 이전 영역은 제거되고 다음 영역이 추가되는 방식으로 동작하는 것으로 확인했습니다.

좀 더 구체적으로 확인 했을 때, ul 태그 단위로 DOM이 동적으로 제거/추가되면서
렌더링 타이밍에 따라 잔상이 생기는 듯 보입니다.

질문

• renderOnlyVisible={true} 옵션을 유지하면서도 스크롤 중 잔상 현상을 제거할 수 있는 방법이 있을까요?
• 클릭 영역에서 드래그 시 좌우 스크롤이 가능해야 하며, 초기 로딩 최적화를 위해 전체 렌더링은 피하고 싶습니다.

[malangfox]

안녕하세요 @hyojaekim 님.

남겨주신 내용을 파악하는 과정에서 확인하고 싶은 부분이 있어 코멘트드립니다.
이슈가 발생하는 데모 페이지나 레파지토리 등을 통해 어떻게 잔상이 남겨지는지 확인해볼 수 있을까요?
특정한 옵션 조합으로 재현이 가능하다면 재현용 데모를 fork해서 재현한 뒤 전달해주셔도 좋겠습니다.

[hyojaekim]

안녕하세요. @malangfox님 확인해주셔서 감사합니다.

현재 회사 내부망 환경에서만 접근이 가능해 공유가 어려운 점 양해 부탁드립니다.
재현용 데모 페이지로 제공 가능할지 확인 해보고 말씀드리겠습니다.

[hyojaekim]

@malangfox 님, 안녕하세요.
재현용 데모 페이지에 접근 가능하실까요?

현재 4.14.0 버전에서 테스트 중인데, renderOnlyVisible={true} 옵션이 문제의 원인일 가능성이 있어 의심됩니다.

CleanShot.2025-07-23.at.19.00.44.mp4

[malangfox]

안녕하세요 @hyojaekim 님.

@egjs/react-flicking 4.13.0 버전으로 다운그레이드하여 이용해보실 수 있을까요?
해당 이슈를 해결한 패치가 배포되고 나면 추가적인 코멘트를 남기겠습니다.

[hyojaekim]

@malangfox 확인 감사합니다 :)