프론트엔드 정복하기

https://velog.io/@raejoonee/createAsyncThunk

createSelector - Selector 의 인자는 Redux State state 의 전체를 가리킨다! 아래 코드를 보면, state 는 state 전체를 가리키는 것을 볼 수 있다! import { createSelector } from '@reduxjs/toolkit' import type { RootState } from '@/store' import type { CreateReportParams } from '@/types/qna/report' const selfState = (state: RootState) => state const selectTarget = ( _state: RootState, target: { id?: number; type: CreateReportParams['ty..

데이터 추가 기능 리액트에서 상태를 업데이트할 때는 기존 상태를 그대로 두면서 새로운 값을 상태로 설정해야 합니다. 이를 불변성 유지라고 하는데요. 불변성 유지를 해 주어야 나중에 리액트 컴포넌트의 성능을 최적화할 수 있기 때문에 push함수를 사용하지 않는걸 권장합니다. 1. Spread 연산자 ES6에 새로 추가된 문법으로 ...을 사용해서 배열의 값들을 받아오거나 확장시킬 수 있습니다. 배열이나 문자열과 같이 반복가능한 문자를 0개이상의 인수(함수로 호출할 경우) 또는 요소(배열 리터럴의 경우)로 확장하여 0개 이상의 키 값의 쌍으로 객체로 확장시킬 수 있습니다. const arr = ['a', 'b', 'c']; const arr2 = [1, 2, 3]; console.log([...arr, ....

action.js 에서 const request = axios.get('url').then(res=>res.data) return { type: CHILD_TEAM_DATA_REQ, payload: request }; 위와 같이 서버통신 응답 값을 reducer로 넘기면, ===>>> reducer에서 console.log(action.payload) 하면 ===> 아래와 같이 서버에서 받은 data가 바로 찍히는 데, const request = axios.get('url').then(res=>res.data) return { type: CHILD_TEAM_DATA_REQ, payload: request, expandeTeam : ..., teamId : .... }; 위처럼 리듀서에 넘길 key를 p..

1. keepAlive 2. react-router-cache-router 3. axios-extensions dohoons.com/blog/1810/

Redux 상태관리 툴에 불편한 점이 있다. 바로 리덕스 상태 앱을 종료하거나 브라우저를 새로 고침하면 저장돼 있던 state들이 모두 reset된다는 것이다. 여기에 아주 편리한 Redux 라이브러리가 있다. Redux-Persist는 state을 LocalStorage나 Session에 저장함으로써 새로고침함에도 state 저장 상태를 유지시킨다. Redux-Persist 설치 및 사용 예시를 살펴보자. 1. 설치 npm install --save redux-persist 2. 사용 예시 //reducers/index.js // reducers/index.js import { combineReducers } from "redux"; ➊ import { persistReducer } from "redu..