개발 이야기9 [React Query] useQuery로 검색 기능을 만들던 중 마주친 문제 useQuery로 검색 기능 만들기 # 문제 상황 검색 기능을 구현하기 위해 useEffect와 if 조건문을 사용하였다. input 태그로 검색어(searchText)를 입력하면 isSearching 변수가 true가 되고, isSearching가 true일 때 백엔드에 데이터를 요청하는 함수가 실행된다. 이를 구현하기 위해 사용한 코드는 다음과 같다. const [submitCheck, setSubmitCheck] = useState(true); const getItems = async (page: number) => { try { const response = await fetch(`/api/items?page=${page}`); const result = await response.json(); .. 2023. 5. 15. [React] Pagination + 검색 기능 로직 직접 만들어보기 Pagination + 검색 기능 만들기Pagination 구현을 위해 고민한 기록 +) 2024. 01. 17. 업데이트Pagination 라이브러리를 배포하였습니다. 필요하신 분들은 사용해보세요! 😀https://inthedev.tistory.com/104 여러 아이템을 페이지로 구분하는 페이지네이션 기능을 구현하기 위해 많은 고민을 하였다. 아이템을 12개씩 한 페이지로 하고 싶어서 아이템에 index를 부여하여 아이템 개수를 계산했다. 0~11번 아이템은 1페이지, 12~23번 아이템은 2페이지, ... 이렇게 코드를 작성했다. 여기까지는 별 문제 없었으나, 문제는 검색 기능과 같이 쓸 때 있었다. 특정 키워드로 검색을 하고 나면 아이템의 개수를 index로 구분할 수 없었다. 아이.. 2023. 2. 18. [React] 페이지 이동 후 스크롤 유지하기 페이지 이동 후 스크롤 유지하기 리액트로 프로젝트를 만들던 중 페이지 이동 후 스크롤이 유지되지 않는 문제가 있었다. 메인페이지에서 다른 페이지로 넘어갔다가 다시 메인페이지로 돌아오면 스크롤 위치가 페이지 가장 위로 가있었음🤔 어떻게 하면 스크롤 위치를 유지할 수 있을까 며칠 동안 고민한 결과 다행히 해결했다. 해결 방법은 다음과 같다. 1. 페이지 이동 직전 sessionStorage에 스크롤 위치 저장하기2. 다시 메인페이지로 돌아왔을 때 sessionStorage에 저장된 스크롤 위치 불러오기 (useLayoutEffect) 1. 메인페이지의 HTML 부분에 스크롤 위치를 저장하는 함수 만들기 return ( sessionStorage.setItem("y", window.pageYO.. 2022. 12. 21. 이전 1 2 다음
