Redux
1.[Redux] 기본 원리
🎈 Redux 란? 앱의 규모가 커지면 props를 App.js에서부터 말단까지 전달해야 한다. → Redux를 사용하면 상태값이 컴포넌트에 종속되지 않고, 컴포넌트 외부의 스토어에서 관리된다. 🎈 스토어 출처 : https://wonit.tistory.
2.[Redux] React에서 사용하기
Redux와 react-redux를 설치한다reduxt-devtools$ npm i --save-dev redux-devtools-extension
3.[Redux] React에 적용하기, 파일 구조
🎈 전체 구조 🎈 1. 스토어 생성 🔰 createStore createStore(rootReducer) 를 이용해 스토어를 생성한다. 또는 src/index.js 에 바로 추가해준다. 🔰 Provider 에서 ` 을 ` 로 감싸준다. Provide
4.[Redux] 상태 변경 / 조회 : dispatch, useSelector
Dispatch 로 스토어 속 상태를 변경하고useSlice 로 스토어 속 상태를 불러온다.액션을 발생시켜 상태를 변경한다또는 Slice의 리듀서를 불러와서 사용한다. 리덕스 스토어에서 상태를 가져온다.상태객체 속 값이 하나만 바뀌어도 리렌더링 되므로, 객체를 가져올
5.[Redux] Redux Toolkit 사용하기
리덕스 환경 설정이 복잡함보일러플레이트 최소화스토어 생성하기reducerstore의 rootReducer를 설정일반 슬라이스로 설정한 경우 자동으로 combineReducers에 전달되고 rootReducer로 설정됨middlewareredux-logger와 같은 리덕
6.[Redux] Redux-thunk
리듀서에서 액션을 처리하여 새로운 state를 만들기 전, 미들웨어가 추가작업을 한다.특정 작업을 함수 형태로 감싼 것액션 크리에이터가 action 객체 대신 함수를 리턴할 수 있게 해준다.함수의 실행이 끝난 다음 action 값이 전달되므로비동기작업을 할 수 있다.