React

React - Redux MiddleWare >> default + redux-thunk

리액트 웹 애플리케이션에서 API 서버를 연동할 때는 API 요청에 대한 상태도 잘 관리해야 합니다. 예를 들어 요청이 시작되었을 때는 로딩 중임을, 요청이 성공하거나 실패했을 때는 로딩이 끝났음을 명시해야 합니다. 요청이 성공하면 서버에서 받아 온 응답에 대한 상태를 관리하고, 요청이 실패하면 서버에서 반환한 에러에 대한 상태를 관리해야 합니다. 리액트 프로젝트에서 리덕스를 사용하고 있으며 이러한 비동기 작업을 관리해야 한다면, '미들웨어'를 사용하여 매우 효율적이고 편하게 상태 관리를 할 수 있습니다. 작업 환경 준비 // src/components/Counter.js import React from "react"; const Counter = ({ onIncrease, onDecrease, numb..

React - redux ( util_Version )

리덕스 더 편하게 사용하기 redux-action을 사용하면 액션 생성 함수를 더 짧은 코드를 생성할 수 있습니다. 그리고 리듀서를 작성할 때도 switch/case문이 아닌 handleActions라는 함수를 사용하여 각 액션마다 업데이트 함수를 설정하는 형식으로 작성해 줄 수 있습니다. // src/modules/counter.js // 앞에 모듈 이름을 붙여 주는 것은 관례에고 익션 이름을 대문자로 하는 것 또한 관례입니다. import { createAction, handleActions } from "redux-actions"; // 액션 타입 정의 const INCREASE = "counter/INCREASE"; const DE..

React - redux

개념 미리 정리하기 상태에 어떠한 변화가 필요하면 액션(action)이란 것이 발생합니다. 이는 하나의 객체로 표현된다. 그리고 액션 객체는 type필드를 반드시 가지고 있어야 합니다. { type: 'ADD_TODO', data: { id: 1, text: '리덕스 배우기' } } function addTodo(data) { return { type: 'ADD_TODO', data } } 액션 생성 함수는 액션 객체를 만들어 주는 함수입니다. 리듀서는 변화를 일으키는 함수입니다. 리듀서가 현재 상태와 전달받은 액션 객체를 파라미터로 받아 옵니다. 그리고 두 값을 참고하여 새로운 상태를 만들어서 반환해 줍니다. const initialState = { c..

React - Context API

React에서 ServerSideRendering을 하기위해 동적 Context API에 대해 알아보겠습니다. import React, { createContext, useState } from 'react'; const ColorContext = createContext({ state: { color: 'black', subcolor: 'red', }, actions: { setColor: () => {}, setSubColor: () => {}, }, }); const ColorProvider = ({ children }) => { const [color, setColor] = useState('black'); const [subcolor, setSubcolor] = useState('red'); c..