Redux의 3가지 규칙
·
✏️ Study/상태 관리
1️⃣하나의 앱에는 하나의 store만 사용 - 여러 store를 만들 수도 있지만, redux dev tools를 사용할 수 없다 2️⃣상태는 읽기 전용 - React의 setState처럼, 상태를 직접 변경하지 않는다 즉, 새로운 상태를 만들고 업데이트 한다 ⭐이를 불변성을 유지한다고 한다 3️⃣reducer 함수는 순수 함수이어야 한다 - 동일한 인풋에 대해 언제나 동일한 아웃풋을 반환해야 한다 - 따라서 new Date() 나 Math.random() 같은 값을 반환해야 하는 경우에는 미들웨어로 처리하거나 reducer 밖에서 처리한다
Action, Reducer, Store, Dispatch
·
✏️ Study/상태 관리
📍Action 상태를 변화시킬 때 발생하는 객체 - 필수로 type 필드를 갖고 있어야 함 - 다른 프로퍼티 추가 가능 { type: "ADD_TODO", data: { id: 0, text: "리덕스 배우기" } } action을 반환하는 action creator 함수 형태로 만들어서 사용하면 export를 앞에 붙여 재사용할 수 있음 📍Reducer 변화를 일으키는 함수로, 2가지 매개변수롤 가짐 - state - action 전달받은 현재 state와 action으로 새로운 state 생성 const initialState = { count: 1 }; function reducer(state = initialState, action) { switch (action.type) { case "INCR..
Redux를 사용하는 이유 3가지 (vs Context API)
·
✏️ Study/상태 관리
1️⃣미들웨어 미들웨어를 사용하면 Action 객체가 Reducer에서 처리되기 전에 다양한 작업을 수행할 수 있다 - 특정 조건에 따라 액션이 무시되게 만들기 - 액션을 콘솔에 출력, 서버에 로깅 등 ⭐비동기 작업을 처리하는데 유용 2️⃣유용한 함수와 Hooks - connect 함수 : Redux의 상태 또는 Action 생성 함수롤 컴포넌트 props로 받아올 수 있음 - useSelector, useDispatch, useStore : React-redux에서 지원하는 유용한 Hooks 상태를 손쉽게 조회, Action을 쉽게 디스패치 등 - connect와 useSelector 함수는 자체적으로 memoization 동작 - 반면, Context API를 사용하면 context의 상태가 바뀌면 ..