[테슬라] 클론 프로젝트 - 스크롤이벤트(useRef)

잠깐 서버구축으로 node로 외도한 건 비밀.

다시 돌아왔습니다.

테슬라 클론을 진행 중 입니다.

 

현재 스크롤이벤트에 발목이 잡혔는데요. 

 

{data && data.car.map((el, i)=> {
  return (
  <picture className="images" >
  	<Imgtag key={i} src={el.img_src} alt={el.img_alt} />
  </picture>
  )
  })
}

그 이유는 리액트에서 DOM에 직접 접근하기를 권하지 않고 있습니다.

useRef란 것을 사용해야하는데, 해당 것을 사용하기가 어렵다는 것이죠.

 

자료가 별로 없습니다. 

기껏해야 해당 위치로 버튼과 연동하는 방식?

 

하지만 직접 접근이 가능하니 그것으로 접근해도 됩니다.

document.addEventListener('scroll', function() {
    var currentScrollValue = document.documentElement.scrollTop;
    console.log('currentScrollValue is ' + currentScrollValue);
  });

바로 위 코드처럼이죠.

임시로 접근한 것이라 이렇게 접근했지만,

지금은 DOM 자체로 건드리고 있지만,

useRef를 이용해서 만져보려고 합니다.

 

아쉽게도 react hooks에선 componentWillUnmount가

매칭되는 게 없어서 클래스형으로 짜야하나? 싶기도 합니다.

이에 대한 연구를 해서 매칭되는 기능을 찾고

useEffect를 이용해서

나중에 해당 값의 변화하면 렌더링 되는 이미지를 구성하려고 합니다.

 

레이지로딩이나 페이지네이션처럼 말이죠.

테슬라에는 없는 채팅기능도 한번 넣어볼 생각입니다.

 

외부 라이브러리가 잘 되어있는 경우가 있어서 그것을 간단하게 적용할 생각입니다.

youtu.be/ueuLTWVmL5g