이안리
167
2021-05-12 17:08:32 작성 2021-05-12 17:08:56 수정됨
4
141

모바일웹 반응형 질문



const [Show, setShow] = useState(false);
    const [scrollPosition, setScrollPosition] = useState(0);
    const updateScroll = () => {
        setScrollPosition(window.scrollY || document.documentElement.scrollTop);
    }
    const showImage = () => {
        if(scrollPosition > 1100){
            setShow(true);
        } 
    }
    useEffect(()=>{
        window.addEventListener('scroll', updateScroll);
        window.addEventListener('scroll', showImage);
    });


위와같이 웹에서는 스크롤이 1100 넘어가면 이미지가 나오게끔 했습니다.

그런데 문제는 모바일로 바꾸니 화면이 줄어들어 거의 스크롤 마지막쯤 가야

첫번째 이미지가 등장하고 나머지 이미지는 아예 안뜨게 되버렸습니다...


어떻게 해야 모바일일때는 다르게 적용시킬 수 있을까요..??

모바일웹 반응형 CSS는 @media screen and (max-width: 500px) 로 처리했습니다.

0
  • 답변 4

  • 바람종
    1k
    2021-05-12 17:30:27 작성 2021-05-12 17:34:21 수정됨

    https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
    getBoundingClientRect 함수에서 얻은 객체에서 top을 보시면 화면 기준으로 위치를 알수 있습니다.

    이러한 함수를 이용해서 화면에 보이고 있는지 판단해서 보여주는 방법도 있습니다.


    조금 풀어서 설명하면

    이벤트는 scroll을 그대로 쓰고

    https://ko.reactjs.org/docs/hooks-reference.html#useref

    useRef를 이용해서 이미지 노드를 참조하게 한후

    showImage 함수에서

    imageEl.current.getBoundingClientRect().top 이런식으로

    화면기준의 높이 위치를 가져와서 조건문을 사용하면 이미지가 화면에 등장했을때를 알수 있을 것입니다.

    (window.innerHeight 등으로 화면 높이를 찾아서 top이 이보다 작아지면 화면에 들어온것이겠죠?)

  • 이안리
    167
    2021-05-13 11:39:22

    @바람종

    const [Show, setShow] = useState(false);
        const ourRef = useRef(null);
        const topPosition = ourRef.current.getBoundingClientRect().top;
    
        const showImage = () => {
            if(topPosition < window.scrollY + window.innerHeight){
                setShow(true);
            } 
        }
        useEffect(()=>{
            window.addEventListener('scroll', showImage);
        });

    이렇게 하는게 맞을까요..?? 

  • 바람종
    1k
    2021-05-13 13:38:33 작성 2021-05-13 13:41:58 수정됨
    const topPosition = ourRef.current.getBoundingClientRect().top;

    요부분이 showImage 안에 들어가야합니다.

    그리고 window.scrollY는 상관없어서 빼셔야합니다.

    (+ ourRef가 잘 바인딩되었는지 확인해야하구요)

    세부적인건 값들을 콘솔로 찍어보시면서 변화를 확인하면서 작업하시면됩니다.


    (ex, showImage 함수에서 ourRef.current를 찍어서 엘리먼트가 잘 잡히는지 본다.

    topPosition의 값과 window.innerHeight의 값도 콘솔에 찍어서 스크롤이 움직임에 따라 값이 어떻게 변화하는지 본다

    이런 값들을 확인하면서 디버깅하고 완성하시면됩니다.)


    그리고 제가 알려드린건 구현에대한 아이디어일 뿐이고

    전체적으로 hook이나 함수형 컴포넌트의 이해가 조금 약하신거 같아서 좀더 파악을 하시면 더 좋은 결과물 있을 것 같습니다.

    (예를 들면 useEffect 실행 타이밍이라던가..

    2번째 인자에 [], [~~~] 등을 넣어서 실행조건을 제한일수도있고

    첫번째 인자의 함수에 리턴값을 넣어서 등록한 이벤트를 제거하는 로직을 넣을수도있고 그렇습니다..

    showImage 밖에서 topPosition을 저장하는것과 안에서 저장하는것의 차이는 무엇일까 등등...

    이거는 리액트 지식은 아니고 클로저를 이해하셔야되긴합니다...)

  • 이안리
    167
    2021-05-13 16:30:26

    @바람종


    정말 감사드립니다... 많이 배우고 갑니다! 좋은 하루 되십시오!

  • 로그인을 하시면 답변을 등록할 수 있습니다.