코딩/React42 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. axios 심화 - instance와 interceptor # axios interceptor의 개념과 필요성 (1) 상황을 통해 살펴보는 interceptor의 필요성 앞선 글에서 get, post, delete 등 axios를 활용하여 HTTP 통신을 하는 방법을 다뤘다. axios.get("http://localhost:3001/todos"); axios.post("http://localhost:3001/todos", todo); axios.delete(`http://localhost:3001/todos/${todoId}`); 이렇게 호출하는 부분이 우리의 리액트 앱에 300개 정도 존재한다고 가정해보자. 그런데, 며칠 후 어떠한 이유 때문에 호출하는 서버가 변경되었다. 변경 전 : http://localhost:3001 변경 후 : htto://local.. 2023. 4. 28. 이전 1 2 3 4 5 ··· 11 다음
