> For the complete documentation index, see [llms.txt](https://toktokhan.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://toktokhan.gitbook.io/docs/onborading/introduction/5.network.md).

# Network: React-Query

## **목적**

* React Query 와 Axios 를 이용한 데이터 통신 로직 경험
* Api 요청 결과에 따른 데이터 업데이트, UI 핸들링 경험
* ReactQuery 의 Cache 에 대한 이해와, react-query-key 와 stale time 에 대한 이해
* 데이터 통신시 유저와의 상호작용에서 주의 해야하는 부분 인지

***

## **해야 할 일**

1. React Query 를 사용하여 데이터 패칭 후, UI 랜더링해보기
2. 메인페이지 프로필카드
3. 회원 정보 수정 Modal 의 form data
4. 로딩 상태의 UI 핸들링 (Loading-Spinner, Skeleton)
5. 데이터 수정 후 업데이트 된 데이터 반영
6. 유저의 submit 버튼 클릭시, 로딩과 , request 가 pending 상태일 때 연속클릭 방지
7. 서버의 요청 결과에 따라 toast 모달로 유저에게 안내해주기 (성공시, 에러시)\ <br>

* ++ react query 의 Invalidate 에 대한 프로세스 이해
* ++ query-cache 를 직접 수정하여 데이터 페칭 프로세스의 속도 최적화하는 방법이 있다는것을 인지
* localhost:4000/api-docs 의 Error400 Schema 참고

***

## Refernce

### Tok Tips

* [axios](https://toktokhan.gitbook.io/docs/basic-guides/network/axios)
* [react-query](https://toktokhan.gitbook.io/docs/basic-guides/network/react-query/why-react-query)

### 공식문서

#### Axios:

* [instanse](https://axios-http.com/kr/docs/instance)
* [interceoptor](https://axios-http.com/kr/docs/interceptors)

#### React-query

* [use-query](https://tanstack.com/query/v3/docs/react/guides/queries)
* [query-key(중요)](https://tanstack.com/query/v3/docs/react/guides/query-keys)
* [use-mutation](https://tanstack.com/query/v3/docs/react/guides/mutations)
* [re-fetch](https://tanstack.com/query/v3/docs/react/guides/query-invalidation)
* [caching(중요)](https://tanstack.com/query/v3/docs/react/guides/caching)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://toktokhan.gitbook.io/docs/onborading/introduction/5.network.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.