iOS WKWebView에서 특정 컴포넌트의 캐싱 문제

Published at 2026-01-20

TIL - iOS WKWebView에서 특정 컴포넌트의 캐싱 문제

날짜: 2026년 1월 20일

• 현상: 애니메이션이 적용된 컴포넌트에서만 실시간 변경되는 값이 ui상에 갱신이 안됨. ios 웹뷰에서만 발생하며 PC에서나 혹은 AOS에서는 발생하지 않음. 또한 애니메이션 컴포넌트 이외에서는 갱신 잘 됨.
• 원인 추정: iOS WKWebView에서 transform 애니메이션이 적용된 레이어가 초기 페인트 스냅샷을 캐싱해 리페인트가 누락되는 Safari/WebView 버그 패턴. 구체적으로 내 상황에서는 animation: translateY가 걸린 BannerWrapper라는 컴포넌트에 포함된 텍스트가 같은 레이어로 묶여 갱신 불가.
• 대응: transform이 걸린 컴포넌트에 key={갱신할 값}를 부여해 값 변경 시 노드를 재생성. 이렇게 해서 리렌더 시 캐시된 레이어 대신 새로 그리게 해 iOS에서 값이 반영되도록 처리.

구체적으로 내 상황을 적자면, 사용자의 인터렉션에 변경되는 값이 있는 <Banner/> 컴포넌트가 있음. 이 배너를 맨 처음에 아래에서 올라오는 애니메이션 효과를 주기 위해 배너를 감싸는 BannerWrapper 가 있고 거기에 animation: translateY 가 걸려 있었음.

위 대응방식처럼 <BannerWrapper key={갱신할 값} .../> 로 수정하니 갱신하는 값이 제대로 반영되어 해결.

추가로, 이렇게하면 최초에 아래→위로 올라오는 애니메이션이 값 갱신시마다 실행되기 때문에 리렌더시엔 애니메이션을 끄도록 enableBannerAnimation 상태를 추가하여 컨트롤함.