본문 바로가기
반응형
SMALL

Redux

 (5)
React에서 zustand 써보기 2(비동기처리, 스토리지저장, 데브툴즈) 어제 저녁까지 공부한 내용인데, zustand가 사용성이 굉장히 좋은 것 같다. recoil아니면 zustand가 사용성도 좋고, react 문법과 구조도 비슷해서 편리한 것 같다. 솔직히 근본은 redux라고 하던데, redux는 너무 복잡하게 느껴진다. 아무튼, 이번글에서는 zustand에서 다양한 기능들을 알아볼 것이다. 지난번글에서는 zustand를 이용해서 store를 만들고, 저장하고, 가져와서 사용했었는데, 실제로는 더 다양한 기능들이 있겠지만, 기본적인 기능들을 알아보도록하자. 1. 스토리지저장 스토리지저장은 persist라는 메소드를 사용하면 된다. persist는 zustand/middleware 안에 있고, zustand 설치했으면 그냥 사용할 수 있다. - 사용법은 zustand로 ..
react redux 기초4(applyMiddleware, thunk) applyMiddleware는 redux에서 dispatch할 때, 값이 reducer에 전달되기 전, 그 사이에 API 호출할 수 있게 해주는 미들웨어라고 한다. 로깅, 충돌보고, 비동기 API 통신, 라우팅 등을 할 때 쓰는거라는데 안쓰면 어찌되는지 확인할 능력이 아직 없다 그래서 어찌 쓰느냐 import { applyMiddleware } from 'redux'; 리덕스에서 applyMiddleware 데려오면 미들웨어를 쓸 수 있다. 여기서 예제하나 돌려보자 const loggerMiddleware = (store: any) => (next: any) => (action: any) => { console.log("store", store); console.log("action", action); ..
React Redux 기초3(Provider, useDispatch, useSelector) Provider는 React에서 Redux 사용할 때, Redux store를 중첩 요소 전역에서 액세스할 수 있도록 하는 것이라고 함 1. react-redux 설치 npm i react-redux --save 2. App 컴포넌트를 Provider로 감싸고, 만들어둔 store를 props로 전달하기 3. store에 값 전달하기 1) useDispatch 생성 import { useDispatch } from 'react-redux'; react-redux에서 useDispatch를 가져온다 const dispatch = useDispatch(); 변수에 할당한다. dispatch({ type: "ADD_TODO", text: todoValue }); dispatch의 매개변수로 객체를 할당한다. ..
React Redux 기초 2 - reducer 여러개 쓰기(combineReducers) 저번 글에서 reducer는 state바꾸는 함수라고 알려줌 근데 저번 글처럼 만들면 reducer 1개밖에 못쓰잖음 그럼 app에서 전역변수는 1개 쓸꺼임? 그럴 때 쓰는게 combineReducers 이거임 쓰는 법 import { combineReducers } from 'redux'; import counter from './counter'; import todos from './todos'; const rootReducer = combineReducers({ counter, todos }); export default rootReducer; 1) redux에서 combineReducers 데리고옴 2) 변수하나 만들어서 combineReducers 호출하고 안에다가 넣고싶은 reducer 다 넣..
React Redux 기초(Counter App 만들기) with Typescript react와 typescript 설치하기 npx create-react-app . --template typescript create-react-app으로 react를 설치할 때 --template typescript 붙이면 typescript로 react 설치된다. redux 설치하기 npm i redux --save --save 붙이면 라이브러리 설치할 때 package.json에는 적용안되고 package-lock.json에는 적용되서 동작은 하는데 확인이 어려울 때를 방지할 수 있다. App.tsx 기본 구성 만들기기본 내용 지우고 글자랑 버튼 두 개를 만들어 줬다function App() { return ( Clicked: times + - ); } reducer 만들기const counter ..
반응형
LIST

티스토리툴바