프론트엔드/React35 React - Suspnese 최종 수정일 : 2024-08-01Suspense비동기 로직을 더 선언적이고 관리하기 쉽게 만들어, 개발자 경험을 크게 향상시킨다. 이는 복잡한 UI와 데이터 흐름을 가진 현대적인 웹 애플리케이션 개발에 매우 유용한 도구이다. 기본 설명1. 기존 비동기 처리의 문제점React 18 이전 버전에서는 주로 코드 스플리팅에만 사용 가능했다(16.6ver에서 등장).React에서 비동기 데이터 로딩은 컴포넌트 내부에서 처리됐다. 이로 인해 많은 조건부 렌더링 로직과 로딩 상태 관리를 필요로 했다. 이는 복잡한 애플리케이션에서는 유지보수를 어렵게 만들었다. 2. Suspense의 해결책Suspense는 비동기 작업을 컴포넌트 외부로 추상화시켜 로딩 상태를 선언적으로 정의할 수 있게 해준다. 또한, 조건부 렌더링을.. 2024. 8. 1. React Query - 기능구현 최종 수정일 : 2024-07-25기능구현Dependant Query만약 어떤 두 쿼리가 의존관계가 있어 특정 순서대로 실행이 되어야 하는 경우에는 useQuery()의 enabled 옵션을 사용할 수 있다. enabled 옵션을 사용하면 enabled 값이 true가 되어야만 해당 쿼리가 실행된다. 이렇게 어떤 특정 값이나 조건이 충족된 이후에 실행되는 쿼리를 Dependant Query라고 한다.Paginated Query리액트 쿼리에서는 좀 더 부드러운 UI 전환을 위해 placeholderData 라는 것을 설정해줄 수 있다. useQuery()에서 placeholderData 옵션에 keepPreviousData 혹은 (prevData) => prevData를 넣어주면 페이지가 새로 바뀌더라도 .. 2024. 7. 25. React Query의 옵션과 리턴 값 최종 수정일 : 2024-07-22React Query의 옵션과 리턴 값useQuery -TanStack Query 공식 문서 useQuery | TanStack Query React DocsDoes this replace [Redux, MobX, etc]? reacttanstack.com 로딩과 에러 처리 구현하기리액트 쿼리에서는 에러가 발생하면 기본적으로 3번의 재시도를 한다. 그러나, 테스트를 위해서는 retry 횟수를 0으로 조정하면 에러 화면을 더 발리 볼 수 있어 편하게 테스트할 수 있다.function HomePage() { const { data: postsData, isPending, isError, } = useQuery({ queryKey: ['posts'],.. 2024. 7. 22. React Query의 캐시 최종 수정일 : 2024-07-22React Query의 캐시유저가 자주 보는 데이터를 어딘가에 저장해 두었다가 백엔드에 요청할 필요 없이 바로 보여주기 위해 캐시(cache)라는 것을 사용한다. 캐시(Cache)데이터를 미리 복사해 놓는 임시 장소를 말한다. 보통 저장 공간의 크기는 작지만, 데이터를 가져오는 속도는 아주 빠르다는 특징이 있다. 따라서 자주 사용하는 데이터를 캐시에 저장해 두면, 해당 데이터를 훨씬 빠르게 가져와 사용할 수 있다. 웹 브라우저는 기본적으로 캐시를 사용해 속도를 높이고 네트워크 비용을 아낀다. 이처럼 캐시를 사용하는 것을 '캐싱'이라고 한다.React Query의 캐시리액트 쿼리 역시 이러한 캐싱을 지원한다. 그렇다면, 언제 데이터를 백엔드에서 다시 받아오는 refetch.. 2024. 7. 22. React Query 최종 수정일 : 2024-07-21React Query1. 상태 관리를 하는 데이터는 두 가지로 나뉜다.A. 클라이언트 상태 데이터웹사이트의 어떤 메뉴가 열렸는지 닫혔는지, 혹은 사용자가 어떤 버튼을 눌렀는지 아닌지와 같은 UI 상태 값이나, 유저가 입력 폼에 입력한 데이터 등 서버와는 상관없이 웹 브라우저 안에서만 사용하는 데이터 B. 서버 상태 데이터가능한 한 최신 상태로 유지되어야 한다.데이터를 받아온느 중에는 어떤 화면을 보여줄 것인지, 로딩과 에러 상황은 어떻게 알 수 있는지, 서버로부터 받아 온 데이터들은 어떻게 관리할지, 데이터를 주기적으로 받아오려면 어떤 식으로 구현해야 할지 등등 여러 가지를 고려해야 한다. 흔히 알려진 상태 관리 라이브러리들은 클라이언트 상태 데이터들을 잘 관리하기 위해.. 2024. 7. 22. 이전 1 2 3 4 ··· 7 다음
