클릭해서 스크롤 이동하기 ! ( click to scroll )

피그마 디자인을 보는데 왠지 클릭하면 해당 컴포넌트로 이동할 것 같은 NavBar가 있었다. 

 

처음엔 단순하게... React-Slick 처럼 라이브러리가 있을까 생각하고 찾아보니 있었다. 실제로 ㅋ ;

https://www.npmjs.com/package/react-scroll

react-scroll

 

실제로 사용법은 간다하고 딱 내가 필요한 props는 몇개 없었다. 정말 간단하게 이 라이브러리 사용법을 적어보자면 

 

import { Link } from 'react-scroll';

특이하게 Link 태그를 사용해서 사용한다. 

<Link to="DetailInfo" spy={true} smooth={true}>
  <Button variant="btntoggle">상세정보</Button>
</Link>

위가 트리거할 버튼을 Link 태그로 감싼거다. 사용한 props는 다음과 같다. 

to : 어떤 컴포넌트로 갈 것인가 
spy :  스크롤이 타켓 포지션에 있다면, 해당 Link 태그가 selected되게 끔 해줌 
smooth : 스크롤 애니메이션 

    <Box position="relative" id="DetailInfo">
     ....
    </Box>

타겟 컴포넌트에서는 id를 적어주면 된다. 

 

그 외 정말 다양한 Props가 있지만 내가 사용하려는 기능은 이게 전부였다. 그래서 사용 해 볼일이 적었다. 

 

그런데 후에 같이 같은 프로젝트에 참여해서 하고 있는 친구의 코드를 보니, 라이브러리를 사용안했다.

Javascript에 내장되어있는 스크롤 이벤트가 있었다. window.scroll() 이다.  

 

https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll

Window.scroll() - Web APIs | MDN

 

작동 확인 

 <Button
   variant="btntoggle"
   onClick={() => {
   window.scrollTo({
        top: 800,
        behavior: 'smooth',
   	});
   }}
 > 
 상세정보
</Button>

작동은 하는데, 뭔가 값을 정해놓고 해당 좌표값만 움직이는거라서 맘에 안들었다.

그리고 컴포넌트가 길이가 늘어날  수도 이런걸 생각하면 동적으로 찾아가게끔 해야겠다는 생각이 들었다.  

 

나는 해당되는 3개의 섹션들을 DetailSection1,2,3 라는 컴포넌트로 만들었었고,

ref를 통해 컴포넌트 offsetTop 값을 얻고 window.scrollTo() 함수를 통해 내가 원하는 액션으로 만들어내었다. 

코드를 보면 

// useRef 등록해주고, 함수를 만들어 Ref 식별자를 받아서 해당 current.offsetTop값을 받아온다. 
const sectionOne = useRef(null);
const sectionTwo = useRef(null);
const sectionThree = useRef(null);
const scrollToSection = (
    elementRef: React.MutableRefObject<HTMLButtonElement | null>,
  ) => {
    if (elementRef.current !== null) {
      const offset = elementRef.current.offsetTop;
      window.scrollTo({
        top: offset,
        behavior: 'smooth',
      });
    }
  };
  
 // onClick에 원하는 ref 식별자를 argument로 넣어준다.
<Button variant="btntoggle" onClick={() => scrollToSection(sectionOne)}>
  상세정보
</Button>
<Button variant="btntoggle" onClick={() => scrollToSection(sectionTwo)}>
  구매정보
</Button>
<Button variant="btntoggle" onClick={() => scrollToSection(sectionTwo)}>
  리뷰 (78)
</Button>

// DetailSection컴포넌트마다 Box로 감싸주어서 바로 거기에 ref를 등록해주었다.
// 본인은 차크라 UI를 이 프로젝트에서 사용중이여서 Box가 곧 Div다.
<Box ref={sectionOne}>
  <DetailSection1 />
</Box>
<Box ref={sectionTwo}>
  <DetailSection2 />
</Box>
<Box ref={sectionThree}>
  <DetailSection3 />
</Box>

 

가능하다면 라이브러리를 안쓰는게 맞다고 생각했고, 최대한 구현해보는게 맞다고 본다.. 

리팩토링 끝