210222_TIL

🍎 오늘 한 일

---

✔️ Redux 연습해보기
먼저 Vanilla Javascript와 함께 썼을 경우를 연습해보면서 전체적인 흐름에 대해 이해를 하고, 그 다음에 React와 함께 사용해봤다. 리듀서..액션..디스패치 등등 굉장히 새로운 개념들이 쏟아져나와서 순서가 딱 정리되지 않는 느낌이었는데 확실히 코드를 따라가면서 보니까 좀 그려지는 느낌이었다.

✔️ Redux - CMarket
Hooks 로 만들었던 C-Market을 이번에는 Redux를 사용해서 다시 구현해봤다. 상품 페이지와 장바구니 페이지 두 페이지로 간단하게 구성되는데, 각 페이지에서 필요한 Action, Reducer를 직접 작성해보고 리듀서를 combineReducer을 통해 하나의 rootReducer로 만들어 Store를 생성할 때 createStore의 인자로 넘겨주기도 했다. Redux와 React를 연결시켜주는 부분은 connect 함수 대신 hooks를 이용했는데, useDispatch, useSelector를 사용해보았다. Redux 에서 중요한 개념들이 어떤 흐름으로 흘러가는지 파악하는 정도에서 끝난 것 같아서 약간 아쉬움이 들었는데, 따로 무언가를 만들어봐야할 것 같다는 생각이 들었다.

 

🍎 기억할 것

---

✔️ Redux 개념
Store : 모든 상태들을 관리하는 중앙관리소
Action, Action Creator : 컴포넌트는 (감히) 스토어의 state에 직접 접근할 수 없다. 반드시 Action을 통해 접근해야 한다.
Reducer : 이전상태 + Action을 합쳐 ⇒ 새로운 상태를 만드는 역할

dispatch 함수 : 스토어 내장함수 중 하나로 액션을 실제로 발생시키는 역할
connect 함수 : React 컴포넌트와 Redux를 연결

 

🍎 더 공부할 것

---

✔️ Redux-thunk