project layout 구상 전 미뤄뒀던 포스팅보고 공부하기 실천 중 intersection observer(교차 관찰자)
Web api 를 활용한 무한 스크롤링 에 대한 글을 읽고 공부하면서 간단히 정리
Q1. productFetchApi 에서 아무래도 정해진 개수만큼 불러와야하기때문에 api상에도 해당 개수만큼만 불러오도록 세팅해두는게 맞으려나 ..?
- window에 event를 추가시키면 여러가지 element에서 해당 이벤트가 발생(?) 할 경우 계속해서 listen
→ window단위와 document 단위의 event adding을 상황에 따라 잘 생각해야겠다.
Q2. useRef hooks를 사용하면 Re-render시에도 모든 값을 유지할수 있음 (?)
→ what is the difference between useRef and useState since both will return the current value. The biggest difference is how you update the value and what that means to the rest of the component using it
where the ref’s value can be updated anytime by assigning a new value to the current property. Also, updating the value of a ref will not signal a rerender, where updating the state will.
++) useRef 는 보통 react문법을 사용해서 dom을 조작하고싶을때 사용.
→ const inputEl = useRef(null) 로 초기화를 해주고, <input ref={inputEl} type="text" /> 와 같이 선언해주면 inputEl 의 current method를 사용해서 해당 dom에 접근할 수 있다.
→ https://ko.reactjs.org/docs/hooks-reference.html#useref
위 docs를 보면
그렇지만, ref 속성보다 useRef()가 더 유용합니다. 이 기능은 클래스에서 인스턴스 필드를 사용하는 방법과 유사한 어떤 가변값을 유지하는 데에 편리합니다.
이것은 useRef()가 순수 자바스크립트 객체를 생성하기 때문입니다. useRef()와 {current: ...} 객체 자체를 생성하는 것의 유일한 차이점이라면 useRef는 매번 렌더링을 할 때 동일한 ref 객체를 제공한다는 것입니다.
useRef를 사용한다면 re-rendering을 발생시키지 않는다고 한다.
그렇다는 것은 useRef를 사용해서 어떠한 변수 를 만든다면, 그 변수는 re-rendering되더라도 값이 변하지 않는다는 말이다. (초기화 x )
new IntersectionObserver (callback, options);
에서 callback으로 들어오는 값은 entries와 observer 가 있는데
<중요> IntersectionObserverEntry의 entries는 targetElements로 이해해도 될 것 같다.
위에서 IntersectionObserver의 callback 함수의 파라미터에 배열로 들어가는 entries들이 사용할 수 있는 프로퍼티
→ boundingClientRect: reflow현상 없이 Element.getBoundingClientRect()와 동일한 정보를 반환
IntersectionObserver.observe(target): 관찰 시작
Parameters
callback
callback: 타겟 엘리먼트가 교차되었을 때 실행할 함수entries: IntersectionObserverEntry 객체의 리스트. 배열 형식으로 반환하기 때문에 forEach를 사용해서 처리를 하거나, 단일 타겟의 경우 배열인 점을 고려해서 코드를 작성해야 합니다.observer: 콜백함수가 호출되는 IntersectionObserver
해당 element가 교차 되었을 때, 알아서 나타남
—> 관찰할 대상에 대한 document.querySelectorAll을 적용 시켜주고, 그 값에 대하여 (배열이기 때문에) forEach를 선언, io(IntersectionObserver)의 observe 메서드를 사용해서 인자를 forEach로 하나씩 들어오는 element를 선언해준다.
so. 무한 스크롤링을 할때, 내머릿속에 현재 연상되는 장면은 20개가 나타난 다음 이후 20개가 나타나는 방식이 반복되는 것인데
이 방식은 처음에 다 render하고(?) 스크롤을 내릴 시에 이미지들이 나눠져서 나타나는 방식인듯함.
오늘은 이런저런 내용 공부하고, 무한 스크롤링 적용할만한 간단한 layout 구상, front 측은 간단히만 세팅해두었고, server측 세팅해서 요청마다 image 받아오는 무한 스크롤링 해봐야겠다.
