본문 바로가기
  • 삽질하는 자의 블로그
10. [ Redux-toolkit ] createSelector !! memoization된 값을 반환한다 Store 에서 오는 객체값이 너무나 커서, 리렌더링 될때마다 새 객체값을 생성시키고, 엄청난 양의 메모리를 소모하게 되었다. 그러므로, 평소처럼 useMemo 를 사용하여, memoizition 을 하는 방향을 모색하려는데, 나는 Redux-toolkit 을 사용한다! Redux-toolkit 에는, 메모이제이션 을 미리 사용하여, 내보낼 수 있는 좋은 기능이 있다. 바로 createSelector 이다. https://react-redux.js.org/api/hooks#using-memoizing-selectors Hooks | React Redux API > Hooks: the `useSelector` and `useDispatch` hooks` react-redux.js.org createSele.. 2023. 1. 25.
9. State 를 빼왔다면, 따로 변수에 저장해 사용하는 것이 좋아 보인다. 다이렉트로 const AllQuotesComponent = () => { const allQuotes = useSelector((state) => state.quotesSlice.allQuotes); const location = useLocation(); const [rearrange, setRearrange] = useState(false); const data = [...allQuotes];// 한번 빼고 사용하도록 하자 첫째로, State 의 조작이 일어 날 것 같은 것도 불안하거니와 둘째로, 실제로 오류를 마주한 적이 많다. 이상하게, 직접 사용하면, 전개가 안된다던가, 하는 문제가 가끔 생겼다. 2022. 12. 22.
8. [ Redux-toolkit ] 리덕스에서 fetch 사용하여 DB 의 값 GET 요청하고 STATE 에 넣기 Thunk 액션 생성자를 이용한, 비동기 함수의 사용 ( fetch ) 는, 다름이 아니라, 코드의 가독성과 컴포넌트 Fat 을 피하기 위한 한가지 방법일 뿐, 필수가 아니라는 사실을 생각하자. 필요에 의해, 함수 내에, fetch 함수를 바로 사용해도, 문제는 없다. 다만, 컴포넌트 Fat 은 보기에 불편하므로, Thunk 액션생성자를 사용하여, 비동기함수를 실행할 것이다. 1. store 안의 action 을 분리한다. Slice 안에는, State 를 조작하는 기본 Slice.reducer 와 Slice.actions이 export 되고 actions 안에는 비동기 함수, 사이드이펙트 함수 가 정의되어 export 된다. * Slice (Redux) 안의, 리듀서함수(state, action 담당).. 2022. 12. 20.
7. Redux-ToolKit [ 비동기, 사이드 이펙트 있는 함수 다루기 e.g. fetch함수] with useEffect ** 1. Slice 의 reducers 안에 들어가는 함수는 반드시 "순수함수" 여야한다. "순수함수"는 동일한 input 에는 반드시 동일한 output 이 나오는 함수를 말한다. 대표적으로 const xxFn = ()=>{ return 3 + 4 } "비순수 함수"는 사이드이펙트 가 있는 함수이다. 동일한 input 으로 다른 output 이 나오는 함수. 대표적으로 const xxFn = (xx) =>{ console.log(xx) } " xx 의 정의가 바뀌면, 다른 값이 log 로 나온다." 2. 대표적으로 안되는 함수 " fetch" : http 요청을 위한 fetch 는 비동기 함수이자, 사이드이펙트가 있는 가장 많이 쓰이는 함수이다. import {createSlice} from "@redux.. 2022. 12. 17.
6. Redux-ToolKit [ State 다루는 몇가지 팁들 ] 1. UI (Modal, Notification 등 ...) 의 State 는, 따로 StateSlice를 통해 다루는 것이 유지보수에 좋다. import { createSlice } from "@reduxjs/toolkit"; const UISlice = createSlice({ name : ..., initialState: ..., reducers:{ toggleCart(){ state.showCart = !state.showCart } toggleNofitication(){ state.showNoti = !state.showNoti } ... } }) function App() { const showCart = useSelector((state) => state.ui.showCart); 2. 객체에.. 2022. 12. 17.
5. Redux-ToolKit [ Slice 분할하기 ] Slice 수십, 수백개라면, 한 파일에 있을 경우 감당이 되지 않을것이다. 분할하자. 우선 기존의 Store 를 보자 import { createSlice, configureStore } from "@reduxjs/toolkit"; const initialCounterState = { counter: 0, showCounter: true }; const initialAuthState = { Authentication: false }; const counterSlice = createSlice({ name: "counter", initialState: initialCounterState, reducers: { increment(state) { state.counter++;.. 2022. 12. 17.
4. Redux-ToolKit [다중 슬라이스 사용해보기] 하나의 Slice 안에 관련 없는 State 와 Action 을 모두 넣을 수는 없다. 관련있는 것들끼리 모아 Slice 를 만들기 위해, 여러개의 Slice 를 사용해보자 연습할 프로세스 [ 숫자를 세는 기능과, 로그인을 하는 기능이 들어간 웹이다] 0. "로그인 상태" 는 "전역" 으로 관리되어야 하는 "State"이다 => 완벽한 redux 의 조건! 1. 로그인이 되면, 네비게이션 바가 변경된다. 2. 로그인 필드가 사라지고 새 컴포넌트가 반영된다. => State 를 추가해야한다. "counterSlice 와는 전혀 다른 동작의 State를" => 결국 "새 Slice 를 생성"하여, "로그인에 대한 State를 조작"해야한다. => 다중 Slice(State 관리) 가 필요하다 코드로 살펴보자.. 2022. 12. 17.
3. Redux-ToolKit 의 이론과 기본 사용 본격적으로 Redux(Tool-kit) 를 다루어보자 1. Redux-ToolKit Redux 의 개발사가 만든, 상위 버젼의 Redux 이다. https://redux-toolkit.js.org/introduction/getting-started Getting Started | Redux Toolkit redux-toolkit.js.org 2. 기본 베이스 사용 원리는 동일하다. 1) 리듀서 함수를 통해, State 를 조작한다. 2) "하나" 의 저장소에 모든 State 를 담는다. * 컴포넌트에서 사용하거나, Provider 하는 역할은 "react-redux" 가 하는 역할이므로, 생략한다. * "react-redux" 는 똑같이 사용된다. 우리는 리덕스를 교체한것이다. 3. 그럼 뭐가 다를까? .. 2022. 12. 17.
2. Redux의 기본적인 사용법 1. Redux 는 Reducer 를 이용해 상태를 관리한다. *Reducer : 프로그래밍 언어로, "입력을 받아 결과를 내는 장치" 정도 로 해석할 수 잇겠다. useReducer와 같은 맥락이지만, 같은 것은 아니다. 변환을 위한 틀(Action) 을 저장해 두는 Reducer 함수 를 생성하고, 그 함수로 State 를 관리한다. 컴포넌트에서, 그 State 를 임의로 변형하는 것은, 매우 큰 오류를 불러 올 수 있으므로, 오로지 Reducer 함수를 통해서만, State 를 변형한다. 2. Redux 는 Store 를 만들어, 그 안에 State 를 전부 넣고 관리한다. 앞서 만든 Reducer 함수를 넣은 store 를 만들어, 그 안에 저장, 배포 한다. 3. Redux 는 "리액트 만의 전.. 2022. 12. 17.
1. Redux 에 관하여 0. 상태(State)에 관하여 1) 로컬 스테이트 : 하나의 컴포넌트 안에 있는 상태 2) 크로스-컴포넌트 스테이트 : 여러개의 컴포넌트에 걸쳐 있는 상태 [props-drilling 을 통해, 여러 컴포넌트에 전달되어있음] 3) App-Wide 스테이트 : 앱의 전반에 걸쳐 있는 상태 (useContext 나 useSession 같은것들) 1. 왜 Context가 있는데도, Redux 를 사용할까? : Context 의 단점을 해결 할 수 있고, 성능을 향싱시킨다. 1) Context를 사용했을 때의 복잡함 : 매우 많은 Context가, 매우 많은 ContextProvider 가, 전반적인 App을 덮을 것이다. 2) 성능 : 개발자피셜, Theme 처럼 한번만 바뀌는, Context는 괜찮지만, .. 2022. 12. 17.

티스토리툴바