Redux 애플리케이션 작동 논의

지난 수업들에서 우리는 Redux 애플리케이션이 작동하는 데 필요한 모든 구성 요소를 구현했습니다. 이제 결론을 내리고 우리 애플리케이션이 상품과 함께 작동하는 주요 단계들을 간략히 살펴봅시다.

첫 실행 시, 우리 애플리케이션은 store에서 useSelector를 사용하여 두 개의 상품 목록을 추출하고 화면에 표시합니다. 화면에는 또한 새 상품 데이터를 입력할 수 있는 양식도 표시됩니다. 사용자가 저장 버튼을 누르면, 버튼 핸들러는 사용자가 양식에 입력한 새 상품 데이터를 포함하는 productAdded 액션을 전송합니다. 우리가 상품 슬라이스에 대해 작성한 리듀서 함수는 이 action을 수신하고 상품 배열에 새 상품 객체를 추가합니다. Store는 컴포넌트들에게 저장된 state 데이터가 변경되었다고 알립니다. 우리의 ProductsList 컴포넌트는 변경된 배열을 읽고 렌더링을 호출하여 결과적으로 추가된 상품을 상품 목록에서 보게 됩니다.

이제 브라우저에서 Redux DevTools를 열고 애플리케이션에 또 다른 상품을 추가한 다음 Log monitor 탭을 살펴봅시다. 여기에서 우리는 애플리케이션 시작 시 state가 어떠했는지, 그리고 저장 버튼 클릭 후 action이 어떻게 발생했는지 볼 수 있습니다. 우리는 action의 payload 속성과 전역 state의 변경 사항을 볼 수 있습니다.

다음 장에서는 Redux 애플리케이션의 데이터를 보다 철저하게 다루겠습니다.