전체 글85 React Query # React Query란? (1) 개념 react-query는 서버의 값을 클라이언트에 가져오거나, 캐싱, 값 업데이트, 에러핸들링 등 비동기 과정을 더욱 편하게 하는데 사용된다. (2) 기존 미들웨어의 한계 다른 서버와의 API 통신과 비동기 데이터 관리를 위해 Redux-thunk, Redux-Saga 등 미들웨어를 채택해서 사용할 수 있다. 하지만 다음과 같은 문제가 있다. 보일러 플레이트 : 코드량이 너무 많음. 규격화 문제 : Redux가 비동기 데이터 관리를 위한 전문 라이브러리가 아님(규격화 문제) (3) 리액트 쿼리의 강점 : 쉽고, 책임에서 자유롭다. 보일러 플레이트 만들다가 오류날 일이 없음 내가 만든 부분 아니기 때문에 잘못이 일어난들 내 잘못이 아님 사용방법이 기존 thunk 대비.. 2023. 4. 29. Custom Hooks # Custom hook이란? (1) input 갯수만큼 늘어나는 useState, event handler 들 // src/App.jsx import React from "react"; import { useState } from "react"; const App = () => { // input의 갯수가 늘어날때마다 state와 handler가 같이 증가한다. const [title, setTitle] = useState(""); const onChangeTitleHandler = (e) => { setTitle(e.target.value); }; // input의 갯수가 늘어날때마다 state와 handler가 같이 증가한다. const [body, setBody] = useState(""); co.. 2023. 4. 29. Thunk 2 # thunk에서 Promise 다루기 (1) Todos 조회하기 기능 구현 1. json-server 설치 및 서버 가동 (db.json) { "todos": [] } 2. Slice로 todos 모듈 추가 구현 // src/redux/modules/todosSlice.js import { createSlice } from "@reduxjs/toolkit"; const initialState = { todos: [], }; export const todosSlice = createSlice({ name: "todos", initialState, reducers: {}, }); export const {} = todosSlice.actions; export default todosSlice.reducer.. 2023. 4. 29. Thunk # Redux 미들웨어 (1) 미들웨어란? 리덕스에서 dispatch를 하면 action 이 리듀서로 전달이 되고, 리듀서는 새로운 state를 반환한다. 근데 미들웨어를 사용하면 이 과정 사이에 우리가 하고 싶은 작업들을 넣어서 할 수 있다. 만약 counter 프로그램에서 더하기 버튼을 클릭했을 때 바로 +1를 더하지 않고 3초를 기다렸다가, +1이 되도록 구현하려면 미들웨어를 사용하지 않고서는 구현할 수 없다. 왜냐하면 dispatch가 되자마자 바로 action이 리듀서로 달려가서 새로운 state를 반환해버리기 때문이다. 즉, 여기서 “3초를 기다리는 작업" 이 작업을 미들웨어가 해주는 것이다. 보통 우리가 리덕스 미들웨어를 사용하는 이유는 서버와의 통신을 위해서 사용하는 것이 대부분이고, 또한.. 2023. 4. 28. 이전 1 2 3 4 5 ··· 22 다음
