안녕하세요!
window.scrollTo() 함수는 이미 렌더링 된 페이지에서 스크롤 위치를 변경하는 역할을 합니다. 하지만 위 코드에서 이미지가 렌더링되는 시점에는 스크롤이 맨 위에 있기 때문에 scrollTo() 함수가 제대로 작동하지 않을 수 있습니다.
그래서 이 문제를 해결하기 위해서는 이미지가 모두 렌더링된 이후에 scrollTo() 함수를 호출해야 합니다. 이를 위해 useEffect 훅을 사용할 수 있습니다. 아래는 코드 예시입니다.
아래 코드에서 useEffect 훅은 isOpen state가 변경될 때마다 실행됩니다. 이미지가 렌더링되고 imgRef.current가 true가 되면, scrollTo() 함수가 호출되어 스크롤이 이미지가 있는 위치로 이동하게 됩니다.
또한, scrollTo() 함수에 behavior: 'smooth' 옵션을 추가하면 부드러운 스크롤 애니메이션이 적용됩니다.
참고로, useRef 훅은 DOM 요소에 대한 참조를 생성하는데 사용됩니다. 이를 이용해 이미지 요소에 대한 참조를 생성하고, 이를 이용해 scrollTo() 함수를 호출하였습니다.