문제 진술

바닐라 JS와 React 앱 간에 공통 데이터 상태를 공유하고 싶습니다.

이 POC에는 무엇이 포함되어 있나요?

• 바닐라에서 두 개의 유사한 카운터 앱을 만들고 반응하겠습니다.
• 카운트는 공통 상태로 저장되어야 합니다.
• 바닐라에서 카운트를 업데이트하면 반응 및 역행에도 반영되어야 합니다.

프로젝트 구조

우리 프로젝트는 두 가지 주요 섹션으로 나뉩니다:

1. 루트 디렉터리: 앱의 바닐라 JavaScript 부분에 대한 핵심 파일이 포함되어 있습니다.
2. react-mf 디렉토리: 바닐라 JavaScript 부분과 상호작용하는 React 마이크로 프론트엔드를 수용합니다.

앱의 아키텍처는 여기 링크에서 확인할 수 있습니다.

주요 파일 및 해당 역할

루트 디렉토리

• index.html: 이는 HTML 구조를 설정하고 스타일시트 및 JavaScript 파일에 대한 링크를 포함하는 앱의 진입점입니다. 여기에는 각각 바닐라 JS 앱과 React 마이크로 프런트엔드를 마운트하는 데 사용되는 id="app" 및 id="root"가 있는 두 개의 주요 div 요소가 있습니다.

• main.js: 앱의 바닐라 JS 부분을 초기화하기 위한 기본 JavaScript 파일 역할을 합니다. 핵심 논리를 처리하고 공유 상태와 상호 작용합니다.

• counter.js: Redux 스토어에 작업을 전달하는 코드를 포함합니다. 예를 들어, 카운터를 업데이트하기 위해 INCREMENT 작업을 전달합니다.

• store.js: 애플리케이션 상태를 관리하고 바닐라 JS와 앱의 React 부분 간의 일관성을 보장하는 Redux 스토어를 설정합니다.

반응-mf 디렉토리

• App.jsx: 마이크로 프론트엔드의 주요 React 구성요소입니다. 로컬 상태 관리를 위해 useState 후크를 활용하고 Redux 저장소를 구독하여 전역 상태를 반영합니다. INCREMENT 작업을 전달하는 버튼을 렌더링하고 스토어의 현재 개수를 표시합니다.

• main.jsx: React 앱이 초기화되고 렌더링되는 React 마이크로 프런트엔드의 진입점입니다.

GitHub 저장소에서 전체 코드를 찾을 수 있습니다.