20.1 : 리덕스 및 비동기 코드
해당 단원의 목표는 백엔드(FireBase)를 추가하여 이 서버로 장바구니를 보내고,
장바구니에서 수정할때마다 서버에 요청을 보내서 백엔드에 장바구니를 저장한다.
이렇게 하고나서 새로고침을 해도 서버에 저장된 장바구니 데이터를 가져오도록 한다.
이것이 목표다.
[새로고침을 했더니 장바구니(My Cart)가 초기화 되었다.. 유지되도록 해야한다]
그런데 백엔드와 백엔드에 보내려는 HTTP 요청을 리덕스를 사용하는 리액트 앱에 어떻게 통합할 수 있는지가 관건이다. 왜 관건이냐면, 리듀서는 부수효과가 없다는 점을 기억해야 한다. 부수효과가 없다는것은 HTTP 요청과 같은 비동기 코드가 들어 가지 않는다는것을 의미한다. 리듀서 함수에 HTTP 요청을 할 수 없으면 도대체 어떻게 해야하는걸까?
방식은 두가지가 있다.
1.컴포넌트 안에서 useEffect를 사용하기.
2.액션 생성 함수를 만들기.
두 가지 선택지중에서 선호하는 방식을 선택하면 된다.
20.2 : 프론트엔드와 백엔드코드
우리는 React를 배우고 있고, React는 프론트엔드쪽의 작업을 한다고 할 수 있다.
위 20.1 gif사진에서 봤던것은 프론트엔드쪽에서 품목이 장바구니 내에 이미 있는지 확인을 하고, 수량을 업데이트는 등 백엔드쪽의 일을 모두 도맡아서 하고 있다. 이는 원래 백엔드에서 해야하는 일이 맞다. 하지만 우리는 프론트엔드를 배우고있고, 백엔드를 배우고있는것이 아니기 때문에 백엔드에서 담당할 로직들을 프론트엔드쪽에서 로직을 담당하고 있다는것을 알아두자.
즉 원래라면 백엔드에서는 데이터를 요청받아서 저장하는것 뿐만 아니라 로직을 추가하여 변환및 저장하는것 까지도 가능하다는 것이다. 이럴경우 프론트엔드쪽에서 해야 할 일이 적어지게 된다.
[백엔드쪽에서 하는일이 많아질수록 프론트엔드에서의 할일은 줄어든다.]
20.3 : 컴포넌트안에서 useEffect 사용
20.4 : 액션 생성자 함수 사용
20.5 : 리덕스 DevTools 탐색하기
공사중.......
