무한 스크롤 함수를 공용화 하자

eggMun·2023년 4월 24일
0

개인프로젝트를 진행하면서 무한 스크롤 함수를 어떻게 hook으로 만들 수 있을까 생각해 보았다.

위에 사진은 무한 스크롤 함수이다.
저 위에서 data와 fetchUseditems는 유동적으로 바껴야 한다.
왜나하면 게시글이나 댓글을 무한스크롤 함수를 사용할 때 data와 fetchUseditems 부분이 다르기 때문이다.
그래서 어떻게 할까 방법을 찾다가 객체 조작 방법이 생각이 났었다.
지금까지 안쓰다 보니까 까먹고 있었다.

위에 사진과 같이 객체를 aaa.bbb 이런식으로 말고
aaa["ccc"] 이렇게 객체의 값에 접근이 가능하다.
이것을 이용하면 저 위의 무한 스크롤 함수도 공용화가 가능하다.
나는 Bracket Notation 방법4와 Computed property names 방법을 이용할 것이다.

먼저 data와 fetchMore를 무한 스크롤 함수에 전달해 줘야한다.
무한 스크롤 함수를 hooks로 만들어서 불러온다.
그리고 매개변수로 data와 fetchMore 그리고 이번 무한스크롤 공용화의 핵심인 fetchKey를 전달해 준다.
fetchKey에 원하는 문자열 값을 넣으면 data[fetchKey] 이렇게 접근이 가능하다.

자 완성된 무한스크롤 공용화이다.

나는 오늘의 경험으로 잊고 있었던 객체의 프로퍼티 접근 방법을 기억을 하였고, 자주 안쓰는 방법들도 많이 써봐야 기억하다는 것을 알게 되었다.
이 방법을 자주 이용해야겠다~~

profile
블로그 이전: https://eggmun98.tistory.com/

0개의 댓글