react(리액트) 특정 요소로 스크롤하기, 검색기능에서 자동 스크롤

원하는 요소(element)로 스크롤 하기 , 검색 리스트 자동 스크롤

자주 쓰이는 곳은 아마 어떤 버튼을 눌렀을 때 해당 위치로 자동 스크롤하는 경우에 사용하겠지만, 이번에 나는 상황이 달랐다.

이번 프로젝트에서 검색 기능을 작성하고 있었고, 검색 시 내용을 포함하는 항목을 하단 list에 보이는 기능이 있었다.
여기서 네이버 검색처럼 방향키로 요소를 선택하고 싶었고, 작성 후 테스트해보니 처음 화면에 보이는 list 영역을 지나가면 스크롤되지 않고, 안 보이는 화면에서 열심히 선택하고 있었다......

 

<element>.scrollIntoView(<옵션>)

나는 이 친구를 사용하여 스크롤 조건을 작성했다.

일부 예시 코드

if (e.code === "ArrowDown" && Number(stockIndex) !== stockArr.length) {
setStockIndex(stockIndex + 1);
// 자동 스크롤 내리기
// 4번째마다 스크롤
if (stockIndex % 4 === 0 && stockIndex !== 0) {
const  scrollPoint =
wrapTagStockList?.current?.children[stockIndex - 1];
scrollPoint.scrollIntoView({ behavior:  "smooth" });
}
} else  if (e.code === "ArrowUp" && Number(stockIndex) !== 1) {
setStockIndex(stockIndex - 1);
// 자동 스크롤 올리기
// 4번째마다 스크롤
if (stockIndex % 4 === 0 && stockIndex !== 0) {
if (stockIndex === 4) {
const  scrollPoint = wrapTagStockList?.current?.children[0];
scrollPoint.scrollIntoView({ behavior:  "smooth" });
 } else {
const  scrollPoint =
wrapTagStockList?.current?.children[stockIndex - 6];
scrollPoint.scrollIntoView({ behavior:  "smooth" });
}
}

다른 조건이랑 섞여있어 보기는 어렵지만, scrollPoint.scrollIntoView({ behavior: "smooth" })를 통해 스크롤했다고 보면 된다. 여기서 scrollPoint는 Ref를 통해 list를 감싸고 있는 div태그에 접근을 했고, 그 이후 children 프로퍼티와 인덱스 값을 이용하여 원하는 요소에 접근을 할 수 있었다.
정해진 기준치 이상을 접근하게 되면 자동으로 리스트가 업되는 방식이다.