웹/Redux 2

Redux를 활용하여 장바구니 만들어보기 (firebase도 곁들인...)

먼저 장바구니에서 구현하고자 하는 기능은 이렇다. - 아이템 항목에서 추가 기능 - 장바구니에서 아이템 수량 조절 - 장바구니 토글 - 장바구니 실시간 저장 + 불러오기 아이템 항목에서 추가 기능 const cartSlice = createSlice({ name: "cart", initialState: { item: [], totalQuantity: 0, cartChange: false }, reducers: { addCartItem: (state, action) => { const newItem = action.payload; const existingItem = state.item.find((item) => item.id === newItem.id); if (!existingItem) { state...

웹/Redux 2022.08.11

Redux - store 만들어서 react에 적용시켜보기

먼저 Redux의 개념은 이러함. React에서는 state라는 존재. 말 그대로 어떠한 상태. 그 상태를 조작하기 위해 훅을 사용했음. 그런데 그 state를 선언한 컴포넌트 외에 다른 곳에서도 쓰고 싶음. 그럴려면 props를 활용해서 넘겨주면 됐음. 여기서 문제 상황. 만약 자식 컴포넌트가 100개라면? 일일이 props로 다 넘겨주다가 손가락 나갈 듯. 그래서 react에는 context라는 개념을 활용해서 useContext라는 훅을 활용해 props로 넘겨주지 않고 state를 관리할 수 있는 방법을 만듦. 근데 이게 개복잡. 더 편한 방식이 바로 redux다. 원리는 조작할 변수나 함수를 다른 곳에 저장 후 내가 필요할 때마다 거기서 꺼내쓰는 방식이다. 비유하자면 어떤 동화를 입을 통해서 넘..

웹/Redux 2022.08.01
728x90