렌더링 이후 스크롤을 맨 아래로 내리고 싶어요.

렌더링 직후 스크롤을 가장 밑으로 내리고 싶으신것 같네요. 위의 onClick 함수에 따라서 isOpen을 true로 변경하고 나서 스크롤을 맨 밑으로 이동 하는 것을 기대하시는것 같지만 요건 순차적으로 동작하지 않습니다. setState함수가 비동기함수이기 때문입니다. 가장 간단하게 수정하는 방법은 onClick함수를 setTimeout을 이용해서 변경해주면 될거 같아요. 이렇게 변경하면 주신 코드도 잘 실행이 됩니다. 더 좋은 방법이 있다면 다른분들이 또 답변을 달아 주실거라고 기대합니다 ㅎㅎ onClick={() => { setIsOpen(true); setTimeout(() => { window.scrollTo({ top: document.body.scrollHeight }); }, 100); }}

setIsOpen(() => true) 이렇게하면요?!

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import React, { useState, useEffect, useRef } from 'react';

export default function Test(props) {
  const [isOpen, setIsOpen] = useState(false);
  const imgRef = useRef(null);

  useEffect(() => {
    if (imgRef.current) {
      window.scrollTo({ top: imgRef.current.offsetTop, behavior: 'smooth' });
    }
  }, [isOpen]);

  return (
    <>
      <div style={{ height: 2000 }}>안녕하세요</div>
      <button onClick={() => setIsOpen(true)}>아래 보기</button>
      {isOpen && (
        <div>
          <img ref={imgRef} src="https://testimages.org/img/testimages_screenshot.jpg" />
        </div>
      )}
    </>
  );
}