리덕스4 Redux Toolkit 리덕스 리액트리덕스 리덕스툴킷 리덕스 툴킷이 주장하는 등장이유 1.설정이 많다 2.미들웨어 설치 해야해서 힘들다 3.반복되는 코드가 많다. 4.불변성 유지의 어려움이 있다. 작은 스토어를 슬라이라고 부른다 작은 스토어들을 합쳐서 리덕스들이 요구하는 큰 스토어로 리덕스 툴킷이 만들어 줄거다 작은슬라이스 카운터를 만든다 각각의 기능별로 슬라이스를 만들어서 하나의 스토어로 만들면 된다. createSlice() 를 이용하여 Reducer,actionValue ActionCreator 를 한번에 구현할수있다 Ex) const counterSlice = createSlice({ name: 'counter', initialState, reducer: { addNumber: ( state, action) => { s.. 2022. 12. 24. 리덕스 투두리스트 리덕스 액션을 만들고 리듀서를 정의한다. export default todos; 를 통해 만든 리듀서를 내보내고, configStore에 연결시킨다. configStore는 여러 state가 모여있는 저장소라고? 보면된다. const rootReucer = combineReducers({ todos, }); 를 통해 todos를 연결한다 todos 는 방금 만든 state집합 ============================================= import { v4 as uuid } from "uuid"; const ADD_TODO = "ADD_TODO"; const REMOVE_TODO = "REMOVE_TODO"; const SWITCH_TODO = "SWITCH_TODO"; .. 2022. 12. 21. 리덕스 리덕스 리덕스 세팅 npm install redux react-redux redux 폴더 만들고 redux폴던안에 config폴더랑 modules 폴더 만들기 , 폴더를 만들었으면 config 안에 configStore.js 만들고 modules 안에 우리가 사용할 state 들을 작성한다 . configStore는 state들을 컴포넌트에 연결시켜주는 역할을 한다 . 3.configStore 초기세팅 -creatStore() 만들기 const store = createStore(rootReducer); -리듀서 만들기 const rootReducer = combineReducers({ //이곳은 state 들을 연결시켜주는 곳 입니다. // ex) counter , accout }); 만든 리듀서를 c.. 2022. 12. 20. Redux Redux - 전역 글로벌하게 상태를 저장할 수 있는 곳을 만들고 어떤 컴포넌트든지 쉽게 접근 가능하게 해주면서 상태관리를 쉽게 해준다! 리액트만 사용했을때는 1,2,3,4 로 옮기기 위해서 prop를 통해서 부모컴포넌트에서 자식 컴포넌트로 값을 보내 주었다. 여러컴포넌트가 있을때는 propsDrilling을 이용하여 값을 보내주곤 했는데 컴포넌트가 만약 수백개라면 사용하는데 불편함이 있어서 리덕스를 사용한다고 한다! 리덕스는 전역에서 사용이 가능하여 원할때 값을 쉽게 빼올 수 있는 장점이 있다? 일단 리액트에서 리덕스를 사용하려면 두개의 패키지를 설치해야한다 yarn = yarn add redux react-redux npm = npm i redux react-redux 터미널에서 설치해주고 시작 리덕.. 2022. 12. 17. 이전 1 다음