react-query6 Redux, Redux toolkit, Redux thunk Redux, Redux toolkit, Redux thunk란?Redux는 React 애플리케이션에서 상태를 효율적으로 관리하기 위한 도구이다. Redux Toolkit은 Redux의 사용을 보다 쉽고 간편하게 만들어주는 공식적인 Redux 라이브러리이다. Redux Thunk는 Redux 미들웨어의 한 종류로 Redux Thunk를 사용하면 Redux 액션 생성자 함수에서 비동기 작업을 처리할 수 있다. 즉 Redux는 상태관리도구이며, Redux Toolkit은 Redux의 사용을 쉽게 해주는 라이브러리., Redux Thunk는 Redux에서 비동기 작업을 처리하기 위한 미들웨어이다. Redux를 사용한 예시// 액션 타입 정의const INCREMENT = 'INCREMENT';const DEC.. 2024. 5. 16. React 무한스크롤 구현하기(Intersection Observer) intersectionObserver API의 속성을 이용하여 viewport 상태를 체크하여 무한스크롤 구현 타켓생성 (스크롤의 하단부에 타겟을 지정하고, ref를 달아준다. 이 ref를 통해서 교차시점을 확인가능함) 먼저 스크롤의 끝 부분을 감지할 타겟을 만들어야한다. 이 타겟은 스크롤이 끝에 도달했는지 확인하는 데 사용된다. 타겟은 React에서는 useRef 훅을 이용해 만들 수 있다. 아래 코드는 타겟을 만들고 페이지 하단에 위치시키는 예제이다. const target = useRef(null); {isLoaded && Loading...} observer 관찰자 생성 (컴포넌트가 렌더링 완료됨에 따라 observer 가 생성되어야 하므로 useEffect를 활용해야 한다) 하단에 도달했는지 감.. 2024. 1. 22. 북마크 기능 구현하기 📁 북마크 기능 미리보기 북마크 기능 구현 과정을 간단하게 정리해보자면 다음과 같다. 프론트 bookmark 버튼 및 bookmark 페이지 형성 백엔드 bookmark 테이블 생성(tweets 테이블과 관계형성) getTweet API에 isBookmark 변수 생성후 트윗 북마크 유무 알려주기. =>isBookmark변수는 false가 기본값. isBookmark가 true인 트위터 게시물은 bookmark 페이지에서 bookmarkAPI 호출시 해당 데이터 넘겨주기 실제 구현한 코드 sequelize에 bookmark 테이블 생성하고 tweet_id을 기준으로 tweet데이터가 담겨져 있는 tweets 테이블과 관계형성하였다. ➡️ 관계를 형성한 이유는 나중에 북마크 페이지에서 데이터를 가지고 올때.. 2024. 1. 22. React-query 데이터 업데이트 문제 발생 Explore 페이지에서 top Latest People로 이동할때 데이터가 제대로 업데이트가 안된채 prop로 넘겨지는 문제가 발생. 설명 데이터가 넘겨지는 과정 Explore 페이지에서 react-query로 데이터를 받음 ➡️ 성공하면 응답값을 set함수로 exploreData라는 state에 담기 ➡️ tweetBox컴토넌트에 prop으로 exploreData 넘겨줌 여기서 다른 종류의 데이터를 받아와야하는 페이지로 이동하면 과거의 데이터만 보내지고 새로운 데이터로 업데이트가 안됨. Chat gpt에 물어봤더니 두가지 방법을 제시해줌. 1. react-query에서 자동적으로 업데이트 시켜주는 data를 prop으로 바로 보내주거나 2. useCallback으로 exploreData 상.. 2024. 1. 22. React Query React Query란? 상태관리 라이브러리 중 하나. 리액트 앱 내에서 데이터 패칭, 캐싱, 동기화, 서버 데이터 업데이트 등을 쉽게 만들어준다. 사용하는 이유 구글링을 통해 react-query를 사용하는 이유에 대해서 찾아보니 간단하게 다음과 같은 이유가 있었다. 서버 쪽 데이터들을 좀 더 쉽게 관리하기 위해 ⇒ 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 쉽게 다룰 수 있도록 도와줌 클라이언트 상태와 서버 상태를 명확히 구분하기 위해. 그 중 서버 쪽 데이터를 좀 더 쉽게 관리하기 위해서 사용해보았다. 기존에 redux를 사용했을때는 데이터를 가져오기 위해 axios를 따로 불러오고 그걸 또 변수에 담고 했는데 react-query의 경우 axios 통신 보낼 api만 간단하게 설정해놓았을때.. 2024. 1. 22. React-query Infinite queries 도입하기 ✔️ Infinite Queries 무한 쿼리 기능은 무한 스크롤이나 더보기와 같이 특정 조건에서 데이터를 추가적으로 받아오는 기능을 구현할때 사용하면 유용한 기능이다. ⇒ 무한 쿼리를 사용하기 위해서는 react-query 중에서 useInfiniteQuery 사용하면 된다. ✔️ infinite queries를 사용한 이유 기존에 구현한 무한스크롤링 방식은 데이터를 가져오는 시점인 target에 도달했을때 새로운 데이터를 가져와서 getData라는 배열에 삽입해서 새로운 데이터를 화면에 로딩하는 방식이었다. setAddData([...addData, ...res.data.data]); 하지만 이러한 방식은 새로운 데이터를 가져와서 로딩하는데에는 문제가 없었지만 하트 기능이나 북마크 기능을 눌렀을때 .. 2023. 6. 6. 이전 1 다음
