seopport.log

reducers: { setReview: (state, action) => { //페이로드: 리뷰 데이터 전체 return { ...state, reviews: action.payload }; }, addReview: (state, action) => { //페이로드: 리뷰 데이터 객체 하나 return { ...state, reviews: [...state.reviews, action.payload] }; }, modifyReview: (state, action) => { //페이로드: 리뷰아이디, 수정된 리뷰 내용, 평점 const targetReviewId = action.payload.reviewId; const modifiedContent = action.payload.modifiedConten..

redux로 투두리스트 만들기 타임어택 redux 개념자체는 알겠는데, 그것보다 객체배열, 구조분해할당 다루는게 더 어렵다..;; 그래서 지웠다 써보고 하면서 연습하면서 이해하려고 노력했다. 리듀서 case를 작성할 때 받아올 payload를 미리 생각해서 주석으로 써놓고 하니까 좋은 것 같다. return할 때도 객체랑 구조분해할당 때문에 문법오류가 자꾸 났는데, return문에서 값을 조작하려고 하지말고 변수에 할당해서 return하니까 알아보기도 쉽고 문법도 잘 이해되는 것 같다. 저번 redux 타임어택할때 보다 늘긴한 것 같으니 괜찮아 // 리듀서 const todos = (state = initialState, action) => { switch (action.type) { case ADD_T..

context로 관리한 상태를 redux로 리팩토링하기 context가 한정된 범위의 상태 관리 느낌이라면 redux는 앱의 전역 상태를 중앙 store에서 관리한다는 느낌이다. 저번에는 최상위 컴포넌트에서 편지 정보를 관리하고, Home 컴포넌트에서 선택 캐릭터 정보를 관리했다면 이번에는 아예 store로 따로 빼서 관리하는 느낌? 저번에 도식화했던 프로젝트 구조를 context와 redux로 리팩토링한 구조로 표현해보았다. router에서는 편지 정보를 관리하고, Home에서는 선택 캐릭터 정보를 관리 지정된 범위 내에서 상태를 관리하는 context 중앙 처리소 store를 만들어서 어디에서든 꺼내쓸 수 있는 redux letters.js const letters = (state = initialS..