⌨️ conceptualization/Redux
-
Redux toolkit 세팅하기⌨️ conceptualization/Redux 2022. 10. 3. 12:45
Redux Toolkit 와 React-Redux 설치하기 📌 typescript를 기반으로 하는 새 프로젝트를 생성 yarn create react-app redux-toolkit --template typescript 📌 Redux toolkit을 다음과 같이 추가한다 yarn add @reduxjs/toolkit react-redux Redux store 생성 📌 src/app/store.js 생성 - configureStore api를 import시켜준다. - 우선 빈 redux store를 생성한다. import { configureStore } from '@reduxjs/toolkit' export const store = configureStore({ reducer: {}, }) // Inf..
-
Redux Toolkit와 RTK Query에 포함된 API⌨️ conceptualization/Redux 2022. 9. 20. 08:46
📌 Redux toolkit 에 포함된 API는 다음과 같다 configureStore() creatStore를 래핑(기능옵션과 기본값을 제공) 자동으로 slice reducer와 결합 모든 Redux middleware를 추가 redux-thunk 를 포함함 createReducer() switch 문을 작성하는 대신 사용가능 immer 라이브러리 자동 사용 createAction() 액션 생성자 함수 생성 함수 자체가 toString() 으로 정의 되어있음 createSlice() reducer functions의 객체, slice name, initial state value,을 받아 slice reducer를 자동 생성 createAsyncThunk() an action type string 과 ..
-
Redux Toolkit 시작⌨️ conceptualization/Redux 2022. 9. 14. 08:42
Redux Toolkit 왜 만들어졌을까? Redux 저장소 구성이 너무 복잡해서 Redux 에서 작업수행시 많은 패키지를 추가해야해서 Redux 에서는 너무 많은 상용구 코드가 필요해서 📌 상용구 코드란(boilerplate-code) ? 수정하지 않거나 최소한의 수정만을 거쳐 여러 곳에 필수적으로 사용되는 코드를 말한다, 프로그램의 로직이나 언어의 필수 구문은 아니면서, 관례적으로 소스 파일 시작 부분에 추가되는 선언들과 같은 것 👉🏻 참고) https://blog.naver.com/oioioq/222339375293 웹에서의 boilerplate의 의미 ( 상용구 코드 / 코드 템플릿 ) boilerplate-code ( 상용구 코드 ) 상용구 코드 - 수정하지 않거나 최소한의 수정만을 거쳐 여러 ..
-
Redux가 무엇⌨️ conceptualization/Redux 2022. 7. 6. 14:02
Redux가 무엇일까? 리덕스는 크로스 컴포넌트 또는 앱 와이드 상태를 위한 상태 관리 시스템 애플리케이션을 변경하고 데이터(크로스컴포넌트 상태, 앱와이드 상태)를 관리하도록 도와줌 로컬상태 크로스 컴포넌트 상태 앱 와이드 상태 1. 로컬상태 데이터가 변경되어서 하나의 컴포넌트에 속하는 UI에 영향을 미치는 상태 예) 사용자 입력을 청취 -> useState를 사용 -> 입력을 state 변수에 저장함 -> 토글버튼 같은것 2. 크로스 컴포넌트 상태 하나의 컴포넌트가 아닌 다수의 컴포넌트에 영향을 미치는 상태 예) 모달창을 닫기위한 트리거가 모달창 안밖에 달려있는 것 -> prop체인을 구축해야함(prop 드릴링) 3. 앱 와이드 상태 모든 컴포넌트에 영향을 미치는 상태 예) 사용자 인증 -> 로그인시 ..