본문 바로가기

useState2

댓글창 데이터 가져오는 방식 업데이트하기 문제 발생 comment 데이터를 관리하는 state를 구별없이 getComments 하나로 설정하니까 트윗 상자 하단에 위치한 댓글 버튼을 누르면 모든 트윗게시물의 댓글창이 열리는 문제가 발생했다. 실제 코드 수정 전 const openComments = ({ id, number }: any) => { customAxios .post("/getComments", { tweet_id: id, }) .then((response) => { data[number].is_opened = response.data.is_opened; setGetData([...data]); setGetComments(response.data.data); }); }; comment 값들을 관리하는 state를 getComments .. 2024. 1. 22.
React-query Infinite queries 도입하기 ✔️ Infinite Queries 무한 쿼리 기능은 무한 스크롤이나 더보기와 같이 특정 조건에서 데이터를 추가적으로 받아오는 기능을 구현할때 사용하면 유용한 기능이다. ⇒ 무한 쿼리를 사용하기 위해서는 react-query 중에서 useInfiniteQuery 사용하면 된다. ✔️ infinite queries를 사용한 이유 기존에 구현한 무한스크롤링 방식은 데이터를 가져오는 시점인 target에 도달했을때 새로운 데이터를 가져와서 getData라는 배열에 삽입해서 새로운 데이터를 화면에 로딩하는 방식이었다. setAddData([...addData, ...res.data.data]); 하지만 이러한 방식은 새로운 데이터를 가져와서 로딩하는데에는 문제가 없었지만 하트 기능이나 북마크 기능을 눌렀을때 .. 2023. 6. 6.