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

다음 내용이 궁금하다면?

또는

이미 회원이신가요?

2023년 3월 30일 오후 12:08

댓글 0