[React] div scroll 맨 위로 올리기 / scroll 컨트롤 하는 방법 (useRef 사용)

Intro

안녕하세요. 이번 시간에는 React scroll 스크롤을 컨트롤하는 방법에 대해 알아보겠습니다. 

 

 

My case

저의 경우 컴포넌트 화면이 다음과 같이 구성되어 있었습니다. 게시글 리스트가 있고, 특정 게시글을 클릭하는 순간 특정 게시글에 대한 내용이 보이고, 아래로 다른 게시글로 이동할 수 있는 최신 게시글 목록이 있습니다. 최신 게시글 목록 중 하나를 클릭하면, 본문 내용이 변하는 형식입니다. 

 

How to solve the problem

 

1. 대상 div에 ref를 활용하기 위해 아래의 코드를 추가합니다. 

const postDetailRef = useRef<HTMLDivElement>(null);

 

2. 정의한 ref 값을 div tag에 할당해줍니다. 

<div ref={postDetailRef}>
  {postDetail && (
    <section>
      <h2>{postDetail.title}</h2>
      <div>{postDetail.content}</div>
    </section>
  )}
  {recentpost && recentpost.length > 0 && (
    <section >
      <h2>{postDetail?.categoryName}more post</h2>
      <div >
        {recentpost?.map((item: postRes, index: number) => {
          return (
            <button
              type="button"
              onClick={() => {
                props.eventpostDetail(true, item.postId);
              }}
            >
              <p>{item.title}</p>
            </button>
          );
        })}
      </div>
    </section>
  )}
</div>

 

3. 상세 페이지를 가져오는 API를 호출하는 함수에 scrollTop 값을 0으로 할당해줍니다 .

  const getpostDetail = async (postId: number) => {
    const { data } = await postAPI.getpostDetail(postId);
    if (data.status === "200") {
      setpostDetail(data.data);
      if (postDetailRef?.current?.scrollTop) {
        postDetailRef.current.scrollTop = 0;
      }
    }
  };

 

 

아래는 전체 코드입니다. 참고해주세요 :) 

const postDetail: NextPage<Props> = (props) => {
  const [postDetail, setpostDetail] = useState<postDetailRes>();
  const [recentpost, setRecentpost] = useState<postRes[]>();
  const postDetailRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    getpostDetail(props.id);
    getRecentpostDetail(props.id);
  }, [props.id]);

  const getpostDetail = async (postId: number) => {
    const { data } = await postAPI.getpostDetail(postId);
    if (data.status === "200") {
      setpostDetail(data.data);
      if (postDetailRef?.current?.scrollTop) {
        postDetailRef.current.scrollTop = 0;
      }
    }
  };
  const getRecentpostDetail = async (postId: number) => {
    const { data } = await postAPI.getRecentpostDetail(postId);
    if (data.status === "200") {
      setRecentpost(data.data);
    }
  };

  return (
    <div ref={postDetailRef}>
      {postDetail && (
        <section>
          <h2>{postDetail.title}</h2>
          <div>{postDetail.content}</div>
        </section>
      )}
      {recentpost && recentpost.length > 0 && (
        <section >
          <h2>{postDetail?.categoryName}more post</h2>
          <div >
            {recentpost?.map((item: postRes, index: number) => {
              return (
                <button
                  type="button"
                  onClick={() => {
                    props.eventpostDetail(true, item.postId);
                  }}
                >
                  <p>{item.title}</p>
                </button>
              );
            })}
          </div>
        </section>
      )}
    </div>
  );
};

export default postDetail;