React Query란? 기존 미들웨어의 한계 보일러 플레이트 : 코드량이 너무 많다. 규격화 문제 : Redux가 비동기 데이터 관리를 위한 전문 라이브러리가 아니다.(규격화 문제) 리액트 쿼리의 강점 : 너무 쉽고, 책임에서 자유롭다 보일러 플레이트 만들다가 오류날 일이 없다. 내가 만든 부분 아니기 때문에 잘못이 일어난들 내 잘못이 아니다. 사용방법이 기존 thunk 대비 너무 쉽고, 직관적이다. 주요 키워드 Query 어떤 데이터에 대한 요청을 의미한다. axios의 경우 get 요청과 비슷하다. const response = await axios.get(’http://localhost:3000/todos’) Mutation 어떤 데이터를 변경하는 것. 어떤 데이터라 함은, 데이터 그룹 그 자체를..
불변성(immutability)란? 불변성이란 한번 생성된 원본의 데이터는 변경 시키지 않고, 데이터 변경 시 새로운 원본을 만드는 디자인 패턴이다. 불변성X -> mutable - 원본 데이터가 변할 수 있다는 의미 - 배열의 push 메소드 const arr = [1,2,3,4,5]; arr.push(6); console.log(arr); // [1,2,3,4,5,6] // push 메소드는 원본 배열인 arr의 값 자체를 변경시킨다. 불변성O -> immutable - 원본 데이터가 변할 수 없다는 의미 - 배열의 map 메소드 const arr = [1,2,3,4,5]; arr.map(el => el * 2); // [2,4,6,8,10] 이 리턴됨. console.log(arr); // [1,2..
1. Axios (1)Axios란? 공식문서에서는 axios를 node.js와 브라우저를 위한 Promise 기반 http 클라이언트라고 소개하고 있다. 다시 말해 http를 이용해서 서버와 통신하기 위해 사용하는 패키지라고 생각하면 된다. (2)Axios 설치하기 CRA를 통해서 새로운 프로젝트를 생성하고, 터미널에 아래의 명령어를 입력해서 axios를 설치한다. yarn add axios 2. json-server 설정 (1) 테스트용 db.json 설정 { "todos": [ { "id": "1", "title": "react" } ] } 3. GET (1) Axios get get은 서버의 데이터를 조회할 때 사용한다. 기본적인 사용방법은 아래와 같다. // url에는 서버의 url이 들어가고, ..
