안녕하세요!
오늘은 기본적이면서 간단한 up버튼에 대해 포스팅을 하기 위해 요렇게 제가 찾아왔습니다~!
그러면 어떻게 오늘은 그냥 심플하게 바로 시작해볼까요?
가 봅시다!
먼저 UP 버튼이 뭘 말하시는거죠?
네 먼저 UP 버튼이랑 페이지의 길이 길어질 때 사용자가 편리하게 최상단으로 이동할 수 있는 버튼입니다!
네이버 홈페이지를 보면 네이버도 우리의 번거러움을 도와주고 있죠 ㅎ
저는 이번 프로젝트에서
스크롤을 내리고 특정 위치가 되면 쑉 하고 나타났다가 다시 올라가면 쑉 하고 들어가는 up 버튼을 만들어보았습니다!
오 괜찮네요 그럼 어떻게 만드는거죠?
먼저 설명드리기 전에 모든 코드의 정답은 없다는 점 말씀드리고 시작하겠습니다!
제가 현재 진행하고 있는 프로젝트를 기준으로 설명 드리겠습니다 :)
// ScrollToTopButton.tsx
const ScrollToTopButton = () => {
const scrollToTopBtnRef: RefObject<HTMLButtonElement> = useRef(null);
const handleScroll = () => {
if (!scrollToTopBtnRef.current) return;
if (window.scrollY > 150) {
scrollToTopBtnRef.current.style.scale = "1";
} else {
scrollToTopBtnRef.current.style.scale = "0";
}
};
useEffect(() => {
window.addEventListener("scroll", handleScroll);
return () => {
window.removeEventListener("scroll", handleScroll);
};
}, []);
const handleScrollToTop = useCallback(() => {
if (scrollToTopBtnRef.current) {
document.documentElement.scrollTop = 0;
}
}, []);
return (
<SScrollToTopButton
ref={scrollToTopBtnRef}
onClick={handleScrollToTop}
></SScrollToTopButton>
);
};저는 ScrollToTopButton 컴포넌트를 따로 만들어서 코드를 작성했으며
먼저 위의 코드처럼 함수를 만들어주었습니다
함수를 잠깐 해석해보면
if문을 통해 특정 Y축 위치를 넘어서면 버튼의 크기가 커지는 상태를 만들어주었으며
반대로 Y축 위치를 넘지 못 하면 버튼의 크기가 작아지는 상태를 만들어 두었습니다
그리고 useEffect를 통해 랜더링이 완료 되었을 때 더 이상 위치 데이터를 수집하지 않도록 하였습니다
저기에 'S'는 뭔가요?
아 저는 styled component를 사용했지 때문에 태그명 앞에 'S'를 두어준 것입니다
그냥 button 태그로 대신 해줄 수도 있습니다
추가로!
if문 조건식으로 사용한 window.scrollY > 150 은 제가 정한 기준이기 때문에 입 맛에 맞게 변경 해주셔도 좋을 것 같습니다!
네! 오늘은 간단하게 UP 버튼 구현하는 코드에 대해 알아보았습니다!
UP 버튼을 구현하는데에는 다양한 방식들이 있습니다 저는 그 중 하나를 알려드린 것이기 때문에 꼭 제가 정답이 아닐 수 있습니다!
하지만 저는 이 방법이 가장 간단하다고 생각해서 이렇게 소개 시켜 드렸습니다!
여러분도 이것저것 해보시면서 가장 프로젝트에 맞고 자신 상황에 맞는 코드를 사용해보시는 것을 추천드립니다!!
네 오늘도 많이 간단한 포스팅으로 마무리를 하네요 ㅎ
저는 언제쯤 멋있는 포스팅을 적을 수 있을지 모르겠습니다 하하...
얼른 계속 공부하고 작성해보고 해서 코드에 익숙해져 어려운 부분들을 충분히 이해해 프로젝트에 관한 코드들을 많이 포스팅 할 수 있도록 해보겠습니다!!
그러면 여러분! 오늘도 너무 고생많았고 항상 화이팅입니다!!
우리는 또 행복하자구요!!
