React) TS - 이벤트 발생 시 element의 스크롤 상단으로 이동 시키기 (2)

2022-02-25

페이지에서 검색을 했을 때, 이전 이슈와 같이 컴포넌트의 Scroll이 상단으로 이동되지 않는다는 이슈를 수정해보려고 합니다.

이전 이슈와 다른 점은 해당 테이블을 가져와 사용하고 있는 부모 컴포넌트에서 Scroll 테이블이 있는 자식 컴포넌트로 이벤트를 보내야 됩니다.

첫번째로, 스크롤이 있는 자식 컴포넌트로 이동하여 이벤트를 실행시킬 props를 만들었습니다.

// child component
import React from 'react'

// 이벤트 조건을 줄 props 지정
export interface ChildProps {
	scrollTop : boolean;
}

export const Child = (props : ChildProps) => {
  // 사용할 props
const {scrollTop} = props;
***
}

boolean 값으로 이벤트를 주는 것이 저에겐 가장 쉽기 때문에 props 값을 boolean으로 지정했습니다.

useEffect를 활용해 Search가 실행 됐을 때 스크롤이 자동으로 상단 이동하도록 지정해주었습니다.

// scrollTop 값이 true 일 때, 해당 이벤트가 발생.
useEffect(() => {
  if (scrollTop) {
    document.getElementById("scrollTop").scrollIntoView(true);
  }
},[scrollTop])

이제 부모 컴포넌트로 와서 자식에게 해당 이벤트를 보내겠습니다.

// parent Component
import React, { useState } from 'react'

export const Parent = () => {
  // 자식 props의 boolean 값을 쉽게 바꿀 수 있도록 useState()를 사용
  // 기본 값은 false
  const [top, setTop] = useState(false)
  
  return (
  	<>
     <Child 
    // 자식 props의 기본 값을 지정
    scrollTop={top}
    />
    </>
  )
}

이제 부모의 top 값에 따라 자식 props인 scrollTop의 값이 바뀌게 됩니다.
해당 이슈 수정을 위해 Search가 실행되는 함수 값에 setTop(true) 값을 넣습니다.

const handleSearch = useCallback(() => {
  setTop(true)
  ***
}, [])

return (
  <>
    <Search 
    onClick={handleSearch}
    />
     <Child 
    // 자식 props의 기본 값을 지정
    scrollTop={top}
    />
    </>
)

Search가 실행됐을 때 top 값이 true가 되고, 자식 컴포넌트의 함수가 실행이 됩니다.
하지만 true이 된 후에는 계속 true로 유지되기 때문에 1회성으로 밖에 사용을 못합니다.

그렇기 때문에 저는 useEffect를 활용하여 top이 true가 되면 자동으로 false로 바뀌도록 지정해주었습니다.

// Parent Component

// 만약 top가 true라면 false로 바뀌도록 수정 
useEffect(() => {
	if(top) {
    setTop(false)
    }
},[top])

그러면 몇번을 Search를 해도 스크롤이 자동으로 위로 이동하게 됩니다.