스크롤 이벤트

---

스크롤 이벤트를 React로 구현하다는 것에 막막함을 느꼈다. 자료도 잘 나오지 않았고, 처음보드 Method들이 많이 보여 어떤것을 골라 사용해야 할지 헷갈렸다.
차분하게 내가 원하는 구현 방향을 생각하며, 로직을 생각했고 이를 해결해 줄 수 있는 Method를 검색하며 해결한 뿌듯한 코드 이다.

내가 원하는 목표를 노트에 정리하고, 목표에 다가가기 위해 어떻게 접근하면 좋을지 정리하였다.

• 나는 스크롤이 가장 상단에 있을 때는 가려졌다가, 내려가는 순간 나타나는 Nav바의 Background를 만들고 싶다.
• 스크롤에는 좌표가 찍히는데, 최상단의 값만 알 수 있다면 최상단의 값과 내가 설정한 값이 일치하는 경우 class의 명을 바꾸면 된다.

스크롤의 상,하 움직이에 대한 값만 없으면 된다. 이를 해결해줄 Method는 getBoundingClientRect() 였다.

• getBoundingClientRect()는 객체로 상,하,좌,우 의 좌표값을 알려주었다. 그렇다면 상(top) 값으로 접근하자.

• getBoundingClienRect().top 은 key값이 top인 value 값으로 접근할 수 있다.

근데 이 Method를 어떻게 실행시키지??

• 리액트의 생명주기를 생각해 보면, constructor -> render -> componentDidMount(setState가 되면) -> reder 순이다.
• componentDidMount에서 scroll 이벤트를 실행하면서, setState 되는 함수를 실행하면 다시 render가 될 것이다!

getBoundingClienRect().top 은 스크롤이 내려갈수 록 -가 되었다.
가장 최상단은 0이기 때문에, 0보다 작을경우 Nav의 Background가 생기도록 하면 좋을 것 같다.

• 스크롤이 움직이게 되면 첫 render 다음 과정인 componentDidMount가 실행되는데, 여기서 scroll 이벤트시 작동하는 함수를 인자로 넣어준다.

• 현재 스크롤 위치가 componentDidMount에서 setState가 되고, 다시 render가 되면서 특정 초기값을 바꿔준다.

• 만일 바뀐 state 값이 0일 경우 nav의 background가 없는 class명이 불리고, 0보다 작을 경우 background가 있는 class명이 불리게 된다.