Redux 연습하기 상품 리스트 페이지와 장바구니 페이지로 단순화해서 만들기 // 구조를 살펴보면 다음과 같다 index.js – App.js - Nav.js - ItemListContainer.js - Item.js - ShoppingCart.js - CartItem.js - OrderSummary.js state: { itemList: […], cartItemList: […], ...} App.js에 모든 state가 있는 상황에서 장바구니의 물건을 업데이트하려면? → 수많은 props drilling이 발생함! → 전역 상태를 담고 있는 Store가 있다면 해결 가능 Cmarket Shopping App Create React App으로 만든 리액트 앱에 Redux를 붙인 구조의 앱 // 구조 * ..

react – 상태관리 학습 목표 * 상태 관리의 필요성 이해 * Redux(혹은 Flux Pattern)에서 사용하는 Action, Reducer, Store의 의미와 특징 * Redux의 3가지 원칙 * Presentational 컴포넌트와 Container 컴포넌트 * Redux hooks(useSelector, useDispatch)에 대한 이해 및 사용(store 업데이트) 상태 관리 프론트엔드 개발에서의 상태 관리 프론트엔드 개발에서 상태의 중요성 프론트엔드 개발에서 상태란? → UI에 동적으로 표현될 데이터 상태에 따라 어떤 화면이 영향을 받는지를 생각해야 한다 (ex. 쇼핑몰의 장바구니 를 생각하면서 연습해보기) 프론트엔드 개발에서의 Side Effect 함수(또는 컴포넌트)의 입력 외에도..