Front-end/Redux3 Redux 3가지 원칙 정리 📍 The truth comes from one source App의 모든 상태는 하나의 저장소에 객체 트리 구조로 저장된다. console.log(store.getState()); /* * { * visibilityFilter: 'SHOW_ALL', * todos: [{ * text: 'Consider using Redux', * completed: true, * }, { *text: 'Keep all state in a single tree', * completed: false * }] * } */ 📍 State is read-only 상태 변경은, 액션 객체(어떤 상태 변화가 일어나야하는 지 기술된 객체)를 통해서만 일어난다. store.dispatch(action: Object) store.dis.. 2021. 11. 4. Redux Action과 Reducer와 Store의 관계성 📌 파일 구조 📌 actions/index.js // action types export const ADD_TO_CART = "ADD_TO_CART"; export const REMOVE_FROM_CART = "REMOVE_FROM_CART"; // actions creator functions export const addToCart = (itemId) => { return { type: ADD_TO_CART, payload: { quantity: 1, itemId } } } export const removeFromCart = (itemId) => { return { type: REMOVE_FROM_CART, payload: { itemId } } } reducer 함수에 인자로 전해주고싶은 acti.. 2021. 9. 28. React를 쓰다보니 Redux가 궁금해졌다 📌 Redux를 찾게된 이유? React로 간단한 웹 페이지를 만들고 있었다. 댓글을 입력했을 때 기존 댓글에 내 댓글이 추가되는 기능을 구현하고 싶었다. useState를 사용해서 데이터를 받아와 컴포넌트안에서 조작해주면 내가 원하는 그림을 얻을 수 있었다. 그런데 문제는 형제 컴포넌트였다. 댓글창 외에도 내 개인정보가 담긴 창에 왔을 때 내가 쓴 댓글들이 촤라락 보이게끔 만들고 싶었다. 그럴려면 댓글창에서 업데이트 된 그 정보가 개인정보 창에도 필요할 것 같았다. 즉, 다른 컴포넌트 안에 있는 정보를 이 컴포넌트가져와야 하는데... 필요한 코드를 그대로 복붙하는 것 말고는 방법이 생각이 안났다. State와 Props를 몰랐을 시절 ㅋㅋㅋㅋㅋ 이 방법이 너무 싫어서 구글링해보다가 global stat.. 2021. 8. 18. 이전 1 다음
