VIEWER-125 / apply useRef to useViewport image, element parameter

[LTakhyunKim]

📝 Description

이전 useViewport Renewal PR 을 통해 추가된 hook 의 사용성을 개선했습니다.

useViewport image, element parameter 를 Ref 로 관리하여 이 두 데이터를 사용하는 쪽에서 image, element 에 대한 디펜던시를 제거하는 방향으로 변경했습니다. (이와 동시에 한 번만 선언하는 function 은 useViewport hook 외부에 선언했습니다.)

이전 구조는 image, element, fitScale option 과 return function 간 커플링이 존재하며, 이에 대한 싱크를 사용하는 쪽에서 신경써야했습니다. (parameter 에 있는 fitScale 을 그대로 사용하는 것도 해당 이슈에 영향을 줍니다.)

현재 구조는 viewport 와 관련된 내용은 setState 의 prevState 를 활용하여 이전보다 안정감 있게 값을 서빙하여 parameter 와 관계없이 안정된 값을 전달한다는 보장이 됩니다.

이렇게 개선하는 이유는 아래와 같습니다. 현재 useViewport hook 내 함수는 return value 에 포함되어 있습니다.

이 과정에서 이전 구조는 라이브러리 사용자 입장에선 최신의 값이 반영된 setViewport function 여부를 보장하기 어렵습니다. (fitScale, image, element 등에 대한 디펜던시가 전부 걸려있으므로.) 이 구조는 라이브러리 사용자 입장에서 까다로운 이슈로 작용할 수 있으므로 처음 한 번만 생성 -> 라이브러리 사용자는 처음 한 번만 생성된 function 을 사용하는 방식으로 변경했습니다. (위 function 은 항상 이전의 값을 참조하며, image, element 는 ref 를 통해 최신 값을 참조)

✔️ PR Type

What kind of change does this PR introduce?

• [ ] Bugfix
• [ ] Feature
• [ ] Code style update (formatting, local variables)
• [x] Refactoring (no functional changes, no api changes)
• [ ] Chore (non-breaking change which does not affect codebase; Build related changes, version modification, etc.)
• [ ] CI related changes
• [ ] Test Case
• [ ] Performance optimization
• [ ] Site/documentation update
• [ ] Other... Please describe:

🎯 Current behavior

return value 중 setViewport 는 image, element, fitScale 에 대한 디펜던스를 가지고 있습니다.

Issue Number: https://lunit.atlassian.net/browse/VIEWER-125

🚀 New behavior

useViewport hook image, element parameter 를 useRef 로 감싼 후 해당 값을 사용합니다. 이와 함께 getDefaultViewport function 을 useViewport 외부에 선언합니다. 4f6b2f6

getViewportWithFitScaleOption function 을 useViewport 외부에 선언합니다. 47738b3

외부로 선언한 function 및 image, element Ref 값을 적용합니다. 456a324

Interaction image2 Docs 에서 클로저 이슈로 인해 삭제한 useInteraction hook 을 복구했습니다. 31a4ed0 (해당 이슈 처리로 클로저 이슈도 함께 해결됩니다. https://lunit.atlassian.net/browse/VIEWER-123)

💣 Is this a breaking change?

• [ ] Yes
• [x] No

[github-actions[bot]]

preview: https://insight-viewer--pr-381.f.lunit.io/

[deminoth]

@LTakhyunKim 이미지 바뀌었을 때 viewport 리셋 또는 유지와 관련된 동작은 여기에서 이어서 작업되나요?

[LTakhyunKim]

이미지 바뀌었을 때 viewport 리셋 또는 유지와 관련된 동작은 여기에서 이어서 작업되나요?

별도의 PR 에서 작업할 예정입니다. 개선된 useViewport hook 마이그레이션 브랜치에서 함께 적용 후 PR 올리고자 합니다.