다독다독을 리팩토링 중이다. 웹 프론트엔드로 공부를 시작하고 나서 처음 만들었던 개인 프로젝트인만큼 컴포넌트 분리도 엉망이고 이래저래 손 볼 곳이 많아보인다. 오늘은 책 검색과 관련한 컴포넌트와 함수들을 리팩토링 했는데 선언형 프로그래밍을 연습하고 정리해볼 수 있는 적합한 코드가 눈에 보여 기록을 남겨본다. 아래 사진은 리팩토링하기 전의 코드다. 보기만 해도 어지럽다.🤮
스크롤되어 올라간 만큼의 높이(scrollTop) + 현재 보여지는 요소의 높이(clientHeight)가 요소의 전체 높이(scrollHeight)보다 크거나 같으면 뷰포트의 끝에 닿았다고 인식하여 addPageNum 함수를 호출한다. (즉, 스크롤을 내려서 이동한 높이와 요소의 전체 높이가 같아지면 스크롤의 최하단까지 내려왔다고 인식함)
How과 What이 잔뜩 뭉쳐져있다. 기능은 제대로 동작하지만 처음 본 사람이 코드를 보기 정말 피곤할 것 같다. 해당 함수가 어떤 역할을 하는지 내부 구현 요소를 한 줄 한 줄 읽어야 이해할 수 있다.
나는 여기서 How와 What을 아래와 같이 생각했다.
How : useEffect, scrollHeight, scrollTop 등 상세 구현부
What: addPageNum이 호출되는 조건
How에 해당하는 상세 구현부를 useInfiniteScrollEffect이란 함수로 따로 발라내고 컴포넌트에는 What에 해당하는 부분만 남겨 콜백함수로 구현했다.
혼자서 판단하기에는 How와 What의 분리가 제대로 이루어졌다고 확신할 수 없지만 적어도 코드가 훨씬 이해하기 편해졌다.
