React에서 Parallax 구현하기

리액트는 컴포넌트 단위로 개발을 한다. 그래서 컴포넌트마다 useEffect 내부에 스크롤 이벤트를 바인딩해서 parallax를 구현해야 하나 싶었는데, 스크롤할 때마다 컴포넌트 개수만큼 이벤트 리스너가 동작하면 아무래도 성능에 영향을 미칠 수밖에 없다. 그래서 생각한 첫 번째 방법은 취상위 컴포넌트인 에서만 스크롤 이벤트를 바인딩하고 document.querySelector를 사용해서 DOM을 가져와 parallax를 구현하는 것이었다. 그러나, 리액트는 가상 DOM을 비교해 브라우저에 painting을 효율적으로 하기 위한 라이브러리이므로 document.querySelector를 사용한다는 것은 리액트의 본질을 고려하지 않는 방법이다.(사용하면 안 되는 게 아니라 지양해야 하는 것) 그래서 두 번째..