Scroll Control (moveToTop Btn)

홈페이지를 개발하다 보면 항상 구현해야 하는 부분은 스크롤이다.

document.documentElement.scrollTop = 0;

함수를 선언해주고 onClick 에다가 걸어줘서 위와 같이 손쉽게 페이지 최상단으로 끌어올리는 것은 매우 간단하다.

하지만 위의 방식과는 조금 다르게 React Hook에서 Scroll을 컨트롤 해보려고 한다.

전체적인 개요는 useEffect에서 addEventListener를 걸어주고 removeEventListener로 clean-up을 해주기만 하면 된다. 생각보다 간단하게 구현 할 수 있었다.

Scroll 값을 읽어와 70보다 클 경우엔 MoveToTopBtnStatus state 값을 True로 바꿔주고 아닐 땐 False로 바꿔준다. 이로 인해 웹 페이지를 처음 로드했을 때(페이지 제일 위, Scroll 값이 0 일때)는 버튼이 보이지 않게 한다.

console comment 내용을 따라가면 이해가 쉬울 것이다.

// JS Code

	const [ScrollValueOfY, setScrollValueOfY] = useState(0);  
    // 스크롤값을 저장하기 위한 state
    const [MoveToTopBtnStatus, setMoveToTopBtnStatus] = useState(false); 
	// 버튼 상태

    const moveToTop = () => {
        document.documentElement.scrollTop = 0;
        console.log("moveToTopBtn Click");
        setScrollValueOfY(0);  // ScrollY 의 값을 초기화
        setMoveToTopBtnStatus(false); // BtnStatus의 값을 false로 바꿈 => 버튼 숨김
    }

    const handleScrollValueOfY = () => {
        setScrollValueOfY(window.pageYOffset); 
        console.log("window 스크롤 값을 <ScrollValueOfY> state에 저장");
        console.log(
            "\n Scroll Event - 5", 
            "\n window.pageYOffset = ", window.pageYOffset,
            "\n ScrollValueOfY = ", ScrollValueOfY);
        
        if(ScrollValueOfY > 70) {
            // 100 이상이면 버튼이 보이게
            setMoveToTopBtnStatus(true);
        } else {
            // 100 이하면 버튼이 사라지게
            setMoveToTopBtnStatus(false);
        } 
    }

    useEffect(() => {
        // state 조건 없이 웹이 로드되면 바로 실행
        const currentScrollState = () => {
            console.log("\n Scroll Event - 3, \n state 조건 없이 웹 로드 되면 바로 이 함수 호출, ")
            console.log("\n Scroll Event - 4, \n 현재 scroll 값을 저장하는 이벤트 리스너 함수 호출 ")

            window.addEventListener('scroll', handleScrollValueOfY);
            
        }
        
        console.log("\n Scroll Event - 1 , \n state 조건 없이 웹 로드 되면 바로 실행, ")
        console.log("\n Scroll Event - 2 , \n addEventListener 함수를 실행 ")
        currentScrollState(); // addEventListener 함수를 실행

        return () => {
            window.removeEventListener('scroll', handleScrollValueOfY); 
            // addEventListener 함수를 삭제
            // 지금 같이 스크롤을 사용하는 경우 처럼 한 번 실행하는 것이 아닌 여러번
            // addEventListener를 사용할 때에는 removeEventListener를 꼭 해준다.
            // 그렇지 않으면 여러번 호출 되고, 메모리에 gabarge collect
        }
    })

    useEffect(() => {
        console.log("스크롤되면 제일 처음, 스크롤 이벤트 발생 \n ScrollY is ", ScrollValueOfY); 
        // ScrollY가 변화할때마다 값을 콘솔에 출력
    }, [ScrollValueOfY])

css 코드는 다음과 같다.
핵심은 position: fixed; 이며 right와 bottom 속성을 통해 웹 페이지 최우측 최하단에 고정으로 위치시킨다. JS에서 스크롤 값에 따라 버튼 활성화 유무를 조절하여 moveTopBtnBoxActive 와 moveTopBtnBoxNone 으로 값을 할당해준다.

	.moveTopBtnBoxActive{
		position: fixed;
		right: 30px;
		bottom: 30px;
		background-color: rgb(239, 239, 239);
		border-radius: 10px;
		border: none;
		z-index: 100;
		width: 30px;
	}
	.moveTopBtnBoxNone{
		display: none;
	}

	.moveTopBtn{
		margin: 2px;
	}