[React] 마우스 드래그로 스크롤 구현하기 - 라이브러리 문제점 해결

[1탄]

[React] 마우스로 드래그 스크롤 구현하기 - 라이브러리 O

[2탄]

[React] 마우스 드래그로 스크롤 구현하기 - 라이브러리 X

 

[3탄]

1탄에서 성공했다가 input focus 문제로 2탄에서 갈아 엎었던 react-indiana-drag-scroll의 input focus 문제를 드디어 알아냈다!!!!

 

7월 6일에 react-indiana-drag-scroll 라이브러리 github에 있는 메일 주소로 문의를 드렸고

7월 17일에 회신이 와서

7월 18일에 확인 후 테스트 해보았다.

---

코드를 살펴보니 뭔가 속성으로 해결 할 수 있는 건 아니였고 따로 코드를 작성 해줘야 했다.

const input = useRef(null);
const onClick = useCallback((event) => {
if (event.target.tagName === "INPUT") {
  input.current = event.target;
  event.target.focus();
} else {
  if (input.current) {
    input.current.blur();
    input.current = null;
  }
  event.target.click();
}
}, []);

react-indiana-drag-scroll 라이브러리에서 import 받아온 ScrollContainer에 onClick 속성을 부여하고 값으로는 함수를 만들어서 input 태그인 지 아닌 지 비교한 다음 useRef를 사용하여 focus나 blur 속성을 부여하여 input을 동작하게 하는 것 같았다.

동작은 매우 잘된다.

 

react-indiana-drag-scroll 라이브러리를 쓴 것과 JS로 구현한 걸 비교 해보자면..

 

- 라이브러리 사용(*react-indiana-drag-scroll)
: 간편하게 사용 할 수 있다. / 문제점이 생겼을 경우 해결책을 찾기는 다소 어려울 수 있다.

- 라이브러리 미사용(*JS)

: 라이브러리 사용 때보다는 코드가 길지만 전체적인 코드를 이해하고 수정하기에는 더 좋다. / 문제점 찾기가 더 쉬운 것 같다.

---

[전체 코드]

import ReactDOM from "react-dom";
import React, { useCallback, useRef } from "react";
import ScrollContainer from "react-indiana-drag-scroll";

const VeryDeep = () => <Deep />;

const Deep = () => (
  <input
    onBlur={() => {
      console.log("onBlur");
    }}
  />
);

const numbers = new Array(10).fill(1).map((_, index) => index + 1);

const Example = () => {
  const input = useRef(null);
  const onClick = useCallback((event) => {
    if (event.target.tagName === "INPUT") {
      input.current = event.target;
      event.target.focus();
    } else {
      if (input.current) {
        input.current.blur();
        input.current = null;
      }
      event.target.click();
    }
  }, []);

  return (
    <div>
      <ScrollContainer className="testCSS" onClick={onClick}>
        {numbers.map((el) => (
          <div key={el} className="row">
            <VeryDeep />
          </div>
        ))}
      </ScrollContainer>
    </div>
  );
};

export default Example;

React Indiana Drag Scroll (deep) - CodeSandbox