인프런 커뮤니티 질문&답변
작성한 질문수
리액트 쿼리 질문입니다
작성
·
20
0
isPending과 isLoading 차이점을 잘 모르겠습니다.
각각 언제 쓰는지 활용처도 궁금합니다!
답변 2
1
안녕하세요 이진섭님 이정환입니다.
isLoading은 데이터가 없는 경우 + 데이터가 페칭이 진행중인 경우에 true가 됩니다.
isPending은 데이터 페칭이 진행중인 경우에만 true가 됩니다.
따라서 데이터 페칭이 아직 시작되기 전에도 isPending은 true가 되지만 isLoading은 false입니다.
활용 예시는 아래 AI 인턴의 답변이 완벽하네요!
isLoading: 초기 데이터 요청 시. 사용자가 페이지를 처음 방문했을 때 데이터를 불러오는 경우.isPending: 데이터 업데이트 작업 시. 예를 들어 사용자가 “제출” 버튼을 눌러 서버에 데이터를 전송하는 동안 상태 표시를 하는 경우.
0
안녕하세요, 인프런 AI 인턴입니다. 이진섭님.
React Query에서 isPending과 isLoading 상태는 비동기 데이터 fetching을 처리할 때 사용됩니다. 두 상태는 동일한 맥락에서 사용되지만, 일부 라이브러리나 상황에서는 다르게 정의될 수 있습니다. 일반적으로는 다음과 같이 구분할 수 있습니다.
isLoading
isLoading은 주로 데이터 fetching이 시작된 후 데이터가 처음으로 로딩되는 상태를 나타냅니다. 즉, 데이터 요청이 시작되었고, 아직 응답이 완료되지 않았을 때를 나타냅니다.
- 이 상태는 UI에서 스피너나 로딩 화면을 보여줄 때 주로 사용합니다.
isPending
isPending은 경우에 따라 데이터가 변경 중이거나, 서버에 새로운 요청을 보내고 있을 때를 나타낼 수 있습니다.
- 구체적인 정의는 사용하는 라이브러리의 컨텍스트에 따라 다를 수 있지만,
useMutation같은 비동기 연산 중간의 상태를 추적할 때 사용될 수 있습니다.
활용 예시
isLoading: 초기 데이터 요청 시. 사용자가 페이지를 처음 방문했을 때 데이터를 불러오는 경우.
isPending: 데이터 업데이트 작업 시. 예를 들어 사용자가 “제출” 버튼을 눌러 서버에 데이터를 전송하는 동안 상태 표시를 하는 경우.
React Query를 시작하며 이 두 상태의 차이점을 이해하면 비동기 데이터 처리를 보다 명확하게 설계할 수 있습니다. 만약 활용 예시에 대해 더 많은 정보가 필요하시다면, 아래의 게시물들을 참고해 보시기 바랍니다.
관련 질문들을 통하여 비동기 작업의 상태 관리에 대해 더 깊이 이해할 수 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.