현재 버전

const topPosition = ourRef.current.getBoundingClientRect().top;

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

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

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

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


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

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

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


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

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

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

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

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

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

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


수정 이력

2021-05-13 13:41:58 에 아래 내용에서 변경 됨 #1
const topPosition = ourRef.current.getBoundingClientRect().top;

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

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

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

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


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

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

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