Astro 앱에 React 통합하기

이 튜토리얼에서는 Astro 앱에 React를 추가하는 방법을 배웁니다. 이를 통해 최신 React 컴포넌트를 생성하고 애플리케이션에 통합할 수 있습니다. Astro 앱이 React를 사용할 수 있도록 준비하고 간단한 컴포넌트를 만드는 데 필요한 단계를 살펴보겠습니다.

주요 학습 내용

• React 패키지와 해당 플러그인을 설치해야 합니다.
• Astro의 컴포넌트 구조는 순수한 HTML과 약간 다릅니다.
• React 컴포넌트가 브라우저에서 렌더링되도록 하려면 클라이언트:only 속성을 사용해야 합니다.

단계별 가이드

Astro 앱에 React를 추가하려면 다음과 같이 진행하세요:

먼저 개발 서버가 더 이상 실행되고 있지 않은지 확인해야 합니다. npm run dev 명령을 취소하여 이를 수행할 수 있습니다. 이는 새 종속성을 설치하는 동안 충돌이 발생하지 않도록 하기 위해 중요합니다.

이제 React를 공식적으로 통합할 준비가 되었습니다. 이렇게 하려면 npx astro add react 명령을 사용합니다. 이 명령을 사용하면 Astro 앱에서 React 지원에 필요한 패키지를 추가합니다.

그러면 새 종속성을 npm으로 설치할지 묻는 메시지가 표시됩니다. 이러한 종속성이 없으면 설치가 올바르게 작동하지 않으므로 반드시 확인해야 합니다.

설치 프로세스 중에 astro.config.mjs도 변경됩니다. 모든 것이 원활하게 작동하려면 이러한 변경 사항도 수락해야 합니다.

설치가 완료되면 이제 앱에 React가 지원됩니다. 어떤 새로운 종속성이 추가되었는지 확인해 보겠습니다. 이제 package.json에서 react, react-dom 및 @astrojs/react를 플러그인으로 찾을 수 있습니다.

모든 것이 올바르게 구성되었는지 확인하려면 테스트할 수 있는 React 컴포넌트가 필요합니다. src 폴더에 components라는 새 폴더를 생성하고, 이 폴더에 나중에 React 컴포넌트를 넣습니다.

이 폴더에 index.jsx라는 파일을 만듭니다. 이것은 코드를 배치할 수 있는 바로 실행 가능한 React 컴포넌트가 될 것입니다.

이제 index.astro 파일에 있는 컴포넌트를 가져와야 합니다. 파일 상단의 하이픈(---) 세 개 사이에 임포트 문을 삽입할 수 있습니다.

가져오기 문은 '../components/index.jsx에서 앱 가져오기'와 같이 작성할 수 있습니다. 이렇게 하면 컴포넌트가 올바르게 로드됩니다.

먼저 파일이 비어 있지 않도록 무언가를 내보내야 합니다. DOM에 무언가를 렌더링하는 간단한 함수를 추가합니다.

컴포넌트에 클라이언트:전용 속성을 설정하는 것을 잊지 마세요. 이렇게 하면 컴포넌트가 서버가 아닌 브라우저에서 렌더링됩니다.

이제 index.jsx 파일로 이동하여 간단한 React 컴포넌트를 만들어 보겠습니다. 예를 들어 HTML에 "App"이라는 텍스트가 포함된 간단한 div를 삽입할 수 있습니다.

이제 앱을 시작하면 새 컴포넌트가 성공적으로 로드되고 올바르게 작동하는 것을 볼 수 있습니다.

DOM을 살펴보면, Astro가 React 컴포넌트가 렌더링되는 "Astro Island"라는 특별한 자리 표시자를 사용한다는 것을 알 수 있습니다.

Astro를 사용하면 여러 프론트엔드 라이브러리를 동시에 사용할 수 있습니다. 즉, 하나의 애플리케이션에서 React, Vue 또는 기타 라이브러리를 복잡한 과정 없이 결합할 수 있습니다.

컴포넌트를 작동시키는 것은 이미 좋은 단계이며 이제 애플리케이션을 더 구축하는 작업을 할 수 있습니다. 다음 튜토리얼에서는 컴포넌트를 채팅 애플리케이션으로 개발해 보겠습니다.

요약

이 튜토리얼에서는 Astro 앱에 React를 추가하고 간단한 컴포넌트를 만드는 방법을 배웠습니다. 이를 통해 애플리케이션을 확장할 수 있는 다양한 가능성이 열렸습니다.