7주차 WIL(Axios, Thunk, React-Query란)

Axios

 

요약

 JavaScript와 Node.js에서 HTTP 요청을 만들고 처리하기 위한 라이브러리로,
 
 클라이언트 사이드에서 서버로 데이터를 가져오거나 보낼 때 주로 사용

 

장점

1. 다양한 HTTP 요청을 지원하며, 커스터마이징이 용이

2. 널리 사용되고 문서화가 잘 되어 있어, 쉽게 사용할 수 있음

 

단점

1. 비동기 코드 작성 및 관리가 복잡할 수 있음

2. 상태 관리를 위한 별도의 라이브러리가 필요

 

언제 쓰는 것이 좋은가?

1. 단순한 HTTP 요청을 처리하거나, 다른 상태 관리 라이브러리 없이 데이터를 가져와야 할 때

2. 프로젝트가 Redux나 React-Query를 사용하지 않는 경우

---

 

Thunk

 

요약

Redux와 함께 사용되는 미들웨어로, 비동기 작업을 처리하는 데 주로 사용

 

장점

1. Redux와 함께 사용되므로 상태 관리와 통합이 용이

2. 액션 크리에이터 함수를 사용하여 비동기 작업을 직접 관리할 수 있음

 

단점

1. 비동기 코드 작성이 번거로울 수 있고, 코드량이 늘어날 수 있음

2. 초기 설정이 어려움

 

언제 쓰는 것이 좋은가?

1. Redux를 사용하는 프로젝트에서 상태 관리와 함께 비동기 작업을 처리해야 할 때 유용

2. 기존의 Redux 애플리케이션에 비동기 동작을 통합하는 데 사용

---

React-Query

 

요약

React 애플리케이션에서 데이터를 관리하고 서버와 통신하는 데 사용되는 라이브러리로,

비동기 데이터 요청 및 캐싱을 효과적으로 처리할 수 있음

 

장점

1. 비동기 데이터 요청, 캐싱, 재시도 및 상태 관리를 단순하게 처리

2. Query, Mutation, 쿼리 인벨리데이션과 같은 유용한 기능을 제공

 

단점

React와 함께 사용하는 것을 전제로 하므로, 다른 상태 관리 라이브러리와 함께 사용하기 어려울 수 있음

 

언제 쓰는 것이 좋은가?

1. React 애플리케이션에서 데이터 관리와 비동기 작업을 단순하게 처리하려는 경우

2. 데이터 캐싱, 재시도, 인벨리데이션과 같은 고급 기능을 활용하고자 할 때 적합

3. Redux를 사용하지 않는 프로젝트에서도 사용할 수 있으며, 상태 관리를 단순화하고자 할 때도 유용

 

캐싱이란..?

캐싱은 이전에 계산한 결과나 데이터를 임시로 저장하는 메커니즘임.

이렇게 저장된 데이터는 나중에 동일한 요청이나 계산을 다시 수행할 때 사용될 수 있으며,

이렇게 함으로써 시스템의 성능을 향상시킬 수 있음.

캐싱은 일반적으로 빠른 접근 시간과 비용을 갖는 데이터를 더 빠르게 반환하기 위해 사용됨

 

 캐싱 예시

가장 간단한 예시는 웹 브라우저의 캐시임.

웹 브라우저는 이미 방문한 웹 페이지의 이미지, 스크립트, 스타일 등을 로컬 저장소에 캐시하는데,

이렇게 하면 사용자가 동일한 웹 페이지를 다시 방문할 때 해당 자원을 다시 서버에서 다운로드하지 않고

로컬 캐시에서 빠르게 로드할 수 있음.

이러한 메커니즘은 웹 페이지의 로딩 시간을 줄이고 대역폭을 절약하는 데 도움을 줌