1. 쿼리 캐시 무효화(Query Invalidation) #mutation으로 서버의 데이터를 수정한 경우, 해당 쿼리 키에 대응하는 데이터는 최신 상태가 아니므로 해당 데이터가 오래되었음을 Query Client에게 알려줄 필요가 있음. 이럴 때 사용할 수 있는 메서드가 `invalidateQueries()`.import { useQueryClient, useQuery } from "react-query";function Todos() { const queryClient = useQueryClient(); const addTodoMutation = useMutation({ mutationFn: (newTodo) => axios.post("/api/data", { text: newTodo })..
1. React Suspense React에서 데이터를 받아올 때, 데이터가 완전히 불러와졌는지 나타내기 위해 로딩 컴포넌트를 추가해주는 게 일반적. 하지만, 아래의 경우처럼 앱의 규모가 커져 네트워크 요청 로직이 복잡해지면 각각의 컴포넌트에 로딩 컴포넌트를 넣어주기가 어려울 수 있음. 1. 부모, 자식 컴포넌트 모두 각각의 로딩 상태를 갖고 있을 때 2. 모든 자식 컴포넌트가 데이터를 불러오고 난 후에 부모 컴포넌트를 화면에 보여주고 싶을 때 이러한 경우에 React Suspense를 사용해 의 하위 컴포넌트가 데이터를 모두 받아왔을 때까지 렌더링을 유예할 수 있음. fetch-on-render: fetching doesn’t start until the component has been rendere..
1. 서버 State와 상태 관리 라이브러리 서버의 데이터를 클라이언트에서 State로 관리하게 되면 어색한 느낌을 받게 되는 상황이 옴. 게시글 작성: POST 요청으로 데이터 보냄 게시글 목록: GET 요청으로 데이터 받아 옴 게시글 추천, 좋아요 등의 State를 클라이언트에 저장해두면 Optimistic Update를 구현할 수 있는 장점이 있지만, 게시글 작성 후 본문 내용을 클라이언트 State에 저장하는 상황에서는 어차피 게시글 페이지로 리다이렉트해 서버에서 데이터를 받아오기 때문에 그러한 작업이 무척 어색하고 무의미하게 됨. 서버 State와 클라이언트 State의 성격이 다르기 때문에 이러한 상황이 발생하는데, 서버 State의 성격에 맞는 상태 관리 라이브러리에는 대표적으로 React-..
1. InterSection Oberver API IntersectionObserver - Web API | MDN Intersection Observer API의 IntersectionObserver 인터페이스는 대상 요소와 상위 요소, 또는 대상 요소와 최상위 문서의 뷰포트가 서로 교차하는 영역이 달라지는 경우 이를 비동기적으로 감지할 수 있는 developer.mozilla.org 참고 자료 Intersection Observer - 요소의 가시성 관찰 2. React에서 무한 스크롤 구현하기 function App() { const bottom = useRef(null); // 문서의 최하단 요소를 저장 useEffect(() => { const options = { rootMargin: "500..
JavaScript/기타 라이브러리 2023. 11. 14. 14:21
1. 쿼리 캐시 무효화(Query Invalidation) #mutation으로 서버의 데이터를 수정한 경우, 해당 쿼리 키에 대응하는 데이터는 최신 상태가 아니므로 해당 데이터가 오래되었음을 Query Client에게 알려줄 필요가 있음. 이럴 때 사용할 수 있는 메서드가 `invalidateQueries()`.import { useQueryClient, useQuery } from "react-query";function Todos() { const queryClient = useQueryClient(); const addTodoMutation = useMutation({ mutationFn: (newTodo) => axios.post("/api/data", { text: newTodo })..
JavaScript/React 2022. 10. 1. 17:52
1. React Suspense React에서 데이터를 받아올 때, 데이터가 완전히 불러와졌는지 나타내기 위해 로딩 컴포넌트를 추가해주는 게 일반적. 하지만, 아래의 경우처럼 앱의 규모가 커져 네트워크 요청 로직이 복잡해지면 각각의 컴포넌트에 로딩 컴포넌트를 넣어주기가 어려울 수 있음. 1. 부모, 자식 컴포넌트 모두 각각의 로딩 상태를 갖고 있을 때 2. 모든 자식 컴포넌트가 데이터를 불러오고 난 후에 부모 컴포넌트를 화면에 보여주고 싶을 때 이러한 경우에 React Suspense를 사용해 의 하위 컴포넌트가 데이터를 모두 받아왔을 때까지 렌더링을 유예할 수 있음. fetch-on-render: fetching doesn’t start until the component has been rendere..
JavaScript/React 2022. 9. 7. 21:33
1. 서버 State와 상태 관리 라이브러리 서버의 데이터를 클라이언트에서 State로 관리하게 되면 어색한 느낌을 받게 되는 상황이 옴. 게시글 작성: POST 요청으로 데이터 보냄 게시글 목록: GET 요청으로 데이터 받아 옴 게시글 추천, 좋아요 등의 State를 클라이언트에 저장해두면 Optimistic Update를 구현할 수 있는 장점이 있지만, 게시글 작성 후 본문 내용을 클라이언트 State에 저장하는 상황에서는 어차피 게시글 페이지로 리다이렉트해 서버에서 데이터를 받아오기 때문에 그러한 작업이 무척 어색하고 무의미하게 됨. 서버 State와 클라이언트 State의 성격이 다르기 때문에 이러한 상황이 발생하는데, 서버 State의 성격에 맞는 상태 관리 라이브러리에는 대표적으로 React-..
웹페이지 예제 2022. 8. 13. 20:18
1. InterSection Oberver API IntersectionObserver - Web API | MDN Intersection Observer API의 IntersectionObserver 인터페이스는 대상 요소와 상위 요소, 또는 대상 요소와 최상위 문서의 뷰포트가 서로 교차하는 영역이 달라지는 경우 이를 비동기적으로 감지할 수 있는 developer.mozilla.org 참고 자료 Intersection Observer - 요소의 가시성 관찰 2. React에서 무한 스크롤 구현하기 function App() { const bottom = useRef(null); // 문서의 최하단 요소를 저장 useEffect(() => { const options = { rootMargin: "500..