scrollIntoVeiw로 스크롤 항상 아래로 유지하기(+ 키보드 Enter 이벤트)

웹 개발을 하다 보면 스크롤을 제어해야 하는 경우가 있습니다.

졸업 프로젝트로 모바일 웹앱을 만드는 도중에 해쉬태그를 그리드 형식으로 입력받는 ui를 구현하였습니다.

키보드 이벤트를 붙여서 해쉬태그를 입력 받는데 여러개의 해쉬태그를 입력 받다 보면 input 태그가 스크롤 아래로 숨겨지는 현상이 있었습니다. input 창이 내려갈 때마다 유저가 스크롤을 내려 input 창을 화면에 보이게 제어하는 것은 좋지 않은 사용자 경험이라 생각하여 webAPI의 scrollIntoView를 사용하여 input 태그에 스크롤이 따라 내려가게 구현하였습니다.

https://developer.mozilla.org/ko/docs/Web/API/Element/scrollIntoView

element.scrollIntoView - Web API | MDN

해당 API의 사용 방법읜 MDN에 자세히 나와있습니다. 바닐라 자바스크립트로 구현할 경우 querySelector 로 DOM을 직접 제어 하여 사용할 수 있습니다. 

// 예시 코드
const target = document.querySelector('.inputTagClassName');

target.scrollIntoView();

✔ 리액트 방식의 적용

제 프로젝트 에서는 Next.js를 사용하였기 때문에 리액트 방식으로 구현할 경우 input tag에 Ref를 달아서 사용하였습니다.

단, Keyboad Event를 캐치해서 tags라는 state에 변경되게 구현을 했는데 이런 경우 스크롤이 적용되지 않는 에러가 있었습니다. setState함수가 호출되면서 화면리 리렌더링 되기 때문에 scrollIntoview 함수가 동작하지 않는 거라고 생각하여 비동기 함수인 setTimeout으로 짧은 시간을 걸어주니 정상적으로 동작 되는 것을 확인 했습니다!

 const onKeyUp = (e: KeyboardEvent<HTMLInputElement>) => {
    if (e.key === "Enter") {
      if(tags.includes(tagInput)) {
        setTagInput("");
        return;
      } // 같은 값은 추가 안되게
      dispatch(uploadSlice.actions.addTag(tagInput)); 
      setTagInput("");
      setTimeout(() => {
        inputRef.current!.scrollIntoView({ behavior: "smooth" });
      }, 100);
    }
  };