저번 시간에는
주요 리덕스 기초를 반복했습니다
이번 시간에는 새로운 내용을 다루겠습니다
오늘은 리덕스를 부수적인 효과(side effect)와
비동기 코드(asynchronous code)와 연결지어 보겠습니다
우선은
이전에 사용했던 기본 앱을 계속 사용하되
백엔드를 하나 추가하겠습니다
이 서버로 장바구니를 보내겠습니다
그 이유는 장바구니를 수정할 때마다
항목의 수량을 더하거나 줄이고
혹은 항목을 지우고 있는데
이 작업을 할 때마다
백엔드 서버에 요청을 보내서
업데이트된 장바구니를 백엔드에 저장하려고 합니다
이렇게 하면 프론트엔드 앱에서 새로고침을 할 때
서버에 저장된 장바구니 데이터를 가져오고
여기에 띄울 수 있게 됩니다
그것이 오늘의 목표입니다
일단 백엔드를 위해서는
또 파이어베이스를 쓰겠습니다
사용이 쉽기 때문입니다
백엔드 코드가 필요하지 않기 때문인데
이것의 의미는
개발자의 삶을 좀 더 편리하게 만들어 준다는 뜻입니다
물론 노드(Node.js) 개발자라면
직접 백엔드 API를 빌드하고
거기로 요청을 보내도 되지만
오늘 강의의 주 목적이 그것은 아닙니다
노드는 완전히 다른 주제이기 때문입니다
여기에서는 여기만의 주제를 다루겠습니다
이 강의는 리액트 강의이기 때문에
리액트에 집중해 보겠습니다
이 백엔드를 사용해서
앱의 요청을 처리하겠습니다
그리고 여기에 여러 종류의 요청을
백엔드로 보내야 합니다
말씀드린 대로, 장바구니 내용이 변할 때마다
그 업데이트 내용을 백엔드로 보내겠습니다
즉 항목을 추가하거나 삭제할 때
이 모든 장바구니 업데이트를
백엔드에서도 적용하는 것입니다
그리고 앱을 새로고침했을 때에도
백엔드에 저장된 데이터를 불러올 수 있게 됩니다
지금은
장바구니에 항목을 더하고
장바구니를 수정하고 새로고침을 하면
그 데이터가 모두 사라집니다
이 장바구니 데이터를 따로 저장하지 않기 때문입니다
이 문제를 해결하기 위해서 이 데이터를
파이어베이스 백엔드에 저장하겠습니다
하지만 문제는 이 백엔드와
백엔드에 보내려는
HTTP 요청을
리덕스를 사용하는 리액트 앱에 통합하는 것입니다
어떻게 할 수 있을까요?
기억하셔야 하는 것은
리듀서(reducer)는 부수효과가 없다는 점에서 순수하고
동기화되어야 합니다
즉 부수 효과를 생성하는 코드이거나
HTTP 요청과 같은 비동기 코드라면
이 코드는 리듀서 함수에 들어갈 수 없습니다
즉 HTTP 요청을 장바구니 슬라이스의
리듀서에서 보낼 수는 없습니다
특히 여기 상태를 수정한 후에는 불가능합니다
리듀서의 끝으로 가서
fetch API를 사용해서
백엔드에 요청을 보낼 수는 없습니다
이것을 리덕스의 작동 방식이 아닙니다
이렇게 하는 것은 잘못됐으며
절대로 이런 식으로 작업하시면 안 됩니다
리듀서 안에서 부수 효과를 실행할 수는 없습니다
동기든 비동기든 상관 없이 불간으합니다
이런 코드는 리듀서 안으로 들어가면 안 되고
또 비동기 코드를 절대로
리듀서 안에서 실행하면 안 됩니다
즉 HTTP 요청을 상태 업데이트 후에
여기로 보낼 수 없다는 의미입니다
대신, 이런 코드를 실행할 때에는
사용할 수 있는 두 가지 선택지가 있습니다
먼저 컴포넌트 안에서 실행할 수 있는데
즉 리덕스를 무시하고
이런 식으로 불러올 수 있습니다
다른 방식으로는 액션 생성 함수(action creator)를 만드는 것인데
이 강의에서는 간접적으로만 사용해 보았습니다
이 방식도 비동기 코드를 실행하거나
일반 부수 효과 코드를 실행할 수 있게 합니다
이 두 가지 선택지가 있습니다
저는 여러분들께 두 가지 선택지를 모두 보여드리고
여러분이 각각의 차이를 확인하신 뒤에
더 선호하는 선택지를 직접 선택하시도록 하겠습니다