redux vs react-query 

    
 `react-query`와 `redux`는 React 애플리케이션에서 데이터를 관리하는 데 사용되는 라이브러리이지만, 주요 사용 목적과 핵심 기능이 다릅니다. 이 둘의 차이점을 이해하면 왜 많은 개발자들이 서버 데이터를 관리하기 위해 `redux` 대신 `react-query`를 선택하는지 이해할 수 있습니다.

### Redux

- **전역 상태 관리**: Redux는 애플리케이션의 전역 상태를 관리하는 데 사용됩니다. 그것은 중앙 집중식 저장소에서 애플리케이션의 모든 상태를 관리하도록 설계되었습니다.
- **명시적**: Redux는 상태 변화를 위해 액션과 리듀서를 사용하며, 상태 변화 과정이 명시적입니다.
- **미들웨어**: 다양한 미들웨어를 통해 비동기 작업, 로깅, 디버깅 등을 지원합니다.
- **캐싱 및 데이터 동기화 미포함**: Redux 자체는 API 콜의 캐싱이나 데이터 동기화 기능을 제공하지 않습니다. 이러한 기능을 구현하기 위해서는 추가적인 미들웨어나 라이브러리가 필요합니다.

### React-Query

- **서버 상태 관리**: React-Query는 서버 데이터를 가져오기, 캐싱, 동기화, 백그라운드 리프레시와 같은 작업을 자동화하는데 중점을 둡니다.
- **자동 캐싱**: 데이터를 자동으로 메모리에 캐싱하고, 시간이 지나면 캐시를 무효화합니다.
- **백그라운드 동기화**: 애플리케이션이 포커스될 때 자동으로 데이터를 최신 상태로 동기화할 수 있습니다.
- **별도의 상태 관리 필요 없음**: 상태를 관리하는 별도의 구조나 로직 없이 API 결과를 직접 사용할 수 있습니다.

### 그래서 Redux 대신 React-Query를 사용하는 이유는?

1. **간소화된 데이터 페칭 로직**: Redux에서 API를 호출하고 데이터를 저장하려면 여러 액션, 리듀서, 그리고 종종 미들웨어 (예: redux-thunk, redux-saga)가 필요합니다. 반면, React-Query는 이러한 프로세스를 대폭 단순화합니다.
2. **내장된 캐싱 및 동기화**: React-Query는 데이터 캐싱 및 백그라운드 동기화와 같은 복잡한 기능을 자동으로 처리합니다.
3. **서버 상태와 클라이언트 상태의 분리**: React-Query를 사용하면 서버 데이터와 클라이언트 상태를 자연스럽게 분리할 수 있습니다.

결론적으로, 많은 개발자들이 서버 데이터의 캐싱, 동기화, 데이터 페칭 등의 복잡한 로직을 간소화하고 효율적으로 관리하기 위해 `redux` 대신 `react-query`를 선택하게 되었습니다. 그렇지만 전역 상태 관리나 애플리케이션 내부의 상태 관리에는 여전히 Redux가 적합할 수 있습니다.


https://tech.kakaopay.com/post/react-query-1/

댓글

댓글 쓰기

이 블로그의 인기 게시물

js 스트링에서 요소 갯수 세기

이상하다 https://stackoverflow.com/questions/881085/count-the-number-of-occurrences-of-a-character-in-a-string-in-javascript If you're looking for the commas: (mainStr. split ( "," ). length - 1 ) //3 If you're looking for the str (mainStr. split ( "str" ). length - 1 ) //4   console . log (( "str1,str2,str3,str4" . match ( /,/g ) || []). length ); //logs 3 console . log (( "str1,str2,str3,str4" . match ( new RegExp ( "str" , "g" )) || []). length ); //logs 4
Read more »

STUDY

@GetMapping("/proxy-download") public ResponseEntity<Resource> proxyDownload() {     String sourceUrl = "https://example.com/file-to-download.bin";     ResponseEntity<byte[]> response = restTemplate.exchange(         sourceUrl,         HttpMethod.GET,         null,         byte[].class     );     byte[] fileBytes = response.getBody();     // 👉 원본 Content-Disposition 헤더에서 파일 이름 추출     String disposition = response.getHeaders().getFirst(HttpHeaders.CONTENT_DISPOSITION);     String filename = "default.bin"; // fallback     if (disposition != null && disposition.contains("filename=")) {         // Content-Disposition: attachment; filename="some_file.bin"         filename = disposition.split("filename=")[1].replace("\"", "").trim();     }     HttpHeaders ...
Read more »

javascript cheatsheet

JavaScript 기능들을 정리한 치트시트를 제공합니다. 이 치트시트는 데이터 구조와 알고리즘을 구현하는 데 필요한 기본적인 구문과 기능을 포함하고 있습니다. ## JavaScript Coding Cheat Sheet ### 1. **기본 문법** #### 변수 선언 ```javascript let variable = value;   // 변수 선언 (변경 가능) const constant = value; // 상수 선언 (변경 불가) ``` #### 함수 선언 ```javascript // 함수 선언식 function functionName(params) {   // 함수 내용 } // 함수 표현식 const functionName = function(params) {   // 함수 내용 }; // 화살표 함수 const functionName = (params) => {   // 함수 내용 }; ``` ### 2. **기본 데이터 구조** #### 배열 (Array) ```javascript let arr = [1, 2, 3]; // 배열 길이 console.log(arr.length); // 배열 요소 접근 console.log(arr[0]); // 배열의 끝에 추가 arr.push(4); // 배열의 끝에서 제거 arr.pop(); // 배열의 앞에 추가 arr.unshift(0); // 배열의 앞에서 제거 arr.shift(); ``` #### 객체 (Object) ```javascript let obj = {   key1: 'value1',   key2: 'value2' }; // 속성 접근 console.log(obj.key1); // 속성 추가 또는 변경 obj.key3 = 'value3'; // 속성 제거 delete obj.key2; ``` ### 3. **반복문 및 조건문** #### 반복문 ```javascript // for 반복문 for (let i = 0; i ...
Read more »