yunTechDiary

개요 안녕하세요 제가 이번에 작성할 내용은 useDebounce라는 custom hook은 어떤 상황에서 어떤 식으로 활용했는지에 작성해 보겠습니다. 개발 환경 React-native(expo) + TypeScript로 진행되었습니다. 상황 설명 이번에 진행 중인 토이 프로젝트에서 아래 사진과 같은 Ui가 존재합니다. 화면 Flow 설명 처음에 GPS를 활용하여 주변 동네에 대한 정보를 받고 사용자가 Text를 입력하게 된다면 해당 입력한 값으로 검색 결과를 보여주는 화면입니다. 개발 계획 위의 Flow대로 개발을 진행하기로 결정했습니다. 여기서 사용자가 주소 검색 시 디바운싱을 적용하기로 했습니다. 디바운싱이란? 연이어 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출하도록 하는 것 디바운싱을 ..

안녕하세요 이번에 소개드릴 내용은 제가 이번에 구현한 useList(가명)에 대해 소개 드리려고 합니다. 제가 어떠한 상황에서 useList를 구현하기로 마음을 먹었고 어떤 식으로 구현을 했는지에 대해 알려드리면 좋을 거 같다고 판단이 되어서 한 번 작성해 봅니다. 개발 환경 React-native + TypeScript로 진행되었습니다. 구현하게 된 계기 위 사진과 같은 화면 구현의 업무를 맡았습니다. 탭 형식으로 이루어졌으며 선택된 카테고리의 리스트를 보여주는 화면이었습니다. 어떻게 예쁘게 구현할까 고민을 한 후 custom hook으로 구현해야겠다 마음을 먹고 바로 기능들을 추출해봤습니다. 기능 추출 A Tab 리스트 불러오기 인피니티 스크롤 인증하지 않은 유저라면 인피니티 스크롤 X, 리스트 하단..