[리액트] 스크롤 위치 복원, 무한 스크롤 Hook 구현

회사 실무에서 유용하게 쓰이는 훅을 공부하면서 (깃허브에 올릴만큼은 아닌) 기능 단위의 간이 코드를 coesandbox에서 작성한 것들을 기록함

1. 스크롤 위치 복원 기능 (from 회사 프로젝트)

라우팅되어 페이지 전환 후 뒤로가기 등을 통해 이전 페이지로 돌아왔을 때 스크롤을 복원하는 기능

[이슈] 스크롤 복원 시 스크롤이 움직이는게 눈에 보임, 혹시나 싶어서 사내 프로젝트에서도 같은 기능을 테스트해보았는데 크롬 브라우저 웹뷰로 테스트, 디버깅 시에는 느끼지 못함

[기억하기] "0" || 0 은 "0"이 truthy한 값이기 때문에 "0"이다.

따라서 if (!val) {} 과 같은 falsy한 값일 시 실행하는 조건문에서 의도한대로 동작하지 않을 수 있습니다. 0일 시 string인지 number인지 명확하게 해야한다. you don't know JS 타입 변환에 대한 공부를 정리해서 포스팅하면서 좀 더 정확히 하기

2. 무한 스크롤

회사에서는 react-infinite-scroll-component 라이브러리를 사용하고 있는데 해당 라이브러리 소스코드를 참고하여 실무에 필요한 기능만을 담은 함수형 컴포넌트로 재구현해보았다.

[기억하기] 함수형 컴포넌트와 클래스 컴포넌트의 차이: 클래스 컴포넌트의 this는 mutable하기 때문에 this.props는 사용자 인터렉션에 의해 바뀐 가장 최근의 값을 참조하지만 함수형 컴포넌트의 props는 클로저로 인하여 이전의 값을 들고 있다. 이는 state를 내부 로직에서 조작하는 함수 또한 해당한다. 클래스 컴포넌트와 동일하게 동작하는 props를 원할 시 useRef()를 사용한다.

---

2020.08.06. Updated

무한 스크롤 기능을 리팩토링했다. (바로가기)

[리액트] react-virtualized을 활용한 무한 스크롤 구현하기