아스트로 프레임워크를 활용하여 애플리케이션을 개발할 때, 앱의 상태를 효율적으로 관리하고 컴포넌트와 프레임워크 간에 이 상태를 공유하는 방법에 대한 궁금증이 생길 수 있습니다. Nano Stores는 React, Preact, Svelte, Solid, Lit, Angular는 물론 Vanilla JS 환경에서도 작동하기 때문에 아스트로에서 상태를 관리하는 데 매우 유용한 도구 중 하나입니다.
이 글에서는 아스트로 프로젝트 내에서 상태를 관리하는 방법에 대해 알아보겠습니다. Nano Store를 사용하여 상태를 관리하고, React 및 Solid.js 컴포넌트 간에 상태를 공유하는 간단한 메모 작성 애플리케이션을 만드는 과정을 단계별로 안내해 드립니다.
아스트로란 무엇인가?
아스트로 프레임워크는 React, Preact, Vue 또는 Svelte와 같은 인기 있는 UI 프레임워크 위에 웹 애플리케이션을 구축할 수 있게 해줍니다. 컴포넌트 기반 구조를 채택하여 아스트로의 각 페이지는 여러 개의 컴포넌트로 구성됩니다.
페이지 로딩 속도를 개선하기 위해 아스트로는 클라이언트 측 JavaScript 사용을 최소화하고, 대신 서버에서 페이지를 미리 렌더링합니다.
아스트로는 콘텐츠 중심 웹사이트를 제작하는 데 최적화된 도구입니다. 블로그, 랜딩 페이지, 뉴스 웹사이트 등 상호작용보다는 콘텐츠가 중요한 페이지에 적합합니다. 상호작용이 필요한 컴포넌트의 경우, 아스트로는 해당 상호작용을 활성화하는 데 필요한 최소한의 JavaScript만을 전송합니다.
설치 및 설정
이미 아스트로 프로젝트를 진행 중이라면 이 섹션은 건너뛰셔도 됩니다.
아직 아스트로 프로젝트가 없다면 새로 생성해야 합니다. Node.js가 로컬 개발 환경에 설치되어 있어야 합니다.
새로운 아스트로 프로젝트를 생성하려면 명령 프롬프트를 열고 프로젝트를 생성할 디렉터리로 이동한 후 다음 명령어를 실행하십시오.
npm create astro@latest
아스트로 설치 여부를 묻는 메시지가 나타나면 “y”라고 응답하고, 프로젝트 폴더 이름을 입력하십시오. 아스트로 공식 설정 튜토리얼을 참고하시면 더욱 쉽게 설정할 수 있습니다. 공식 설정 튜토리얼
프로젝트 생성이 완료되면 다음 명령어를 실행하여 프로젝트에 React를 추가합니다.
npx astro add react
마지막으로 다음 명령어를 실행하여 React용 Nano Stores를 설치합니다.
npm i nanostores @nanostores/react
터미널에서 프로젝트의 루트 폴더로 이동한 후, 다음 명령어 중 하나를 사용하여 애플리케이션을 시작합니다. (사용하는 패키지 관리자에 따라 다름)
npm run dev
또는:
yarn run dev
또는:
pnpm run dev
웹 브라우저에서 http://localhost:3000에 접속하여 웹사이트 미리보기를 확인하십시오.
아스트로 프로젝트 설정이 완료되면, 애플리케이션 데이터 저장을 위한 저장소를 생성할 차례입니다.
노트 저장소 생성
애플리케이션 루트의 /src 디렉터리 내에 noteStore.js라는 파일을 생성합니다. 이 파일 안에서 nanostores의 atom() 함수를 사용하여 메모 저장소를 만듭니다.
import { atom } from "nanostores"
export const notes = atom([])
export function addNote(note) {
notes.set([...notes.get(), note])
console.log("Added note: ", note.get())
}
addNote() 함수는 메모를 인수로 받아 메모 저장소에 저장합니다. 데이터 변형을 방지하기 위해 메모를 저장할 때 스프레드 연산자를 사용합니다. 스프레드 연산자는 객체 복사를 위한 JavaScript 단축 표현입니다.
메모 작성 앱 UI 만들기
UI는 간단하게 메모를 입력받을 입력 필드와, 버튼 클릭 시 메모를 저장소에 추가하는 버튼으로 구성됩니다.
src/comComponents 디렉터리 안에 NoteAddButton.jsx라는 새로운 파일을 생성한 후, 다음 코드를 붙여넣습니다.
import {useState} from "react"
import {addNote, notes} from "../noteStore"
export default function NoteAdder() {
const [userNote, setUserNote] = useState('')
return(
<>
<label htmlFor="note">Add a note: </label>
<input type="text" name="note" id="note"
onChange={(event) => setUserNote(event.target.value)} />
<button onClick={() => addNote(userNote)}>Add</button>
<ul>
{
$notes.map((note, index) => {
<li key={index}>{note}</li>
})
}
</ul>
</>
)
}
이 코드는 입력 필드에 내용을 입력할 때 컴포넌트의 상태에 메모를 추가합니다. 버튼을 클릭하면 메모가 저장소에 저장됩니다. 저장소에서 메모를 가져와 순서 없는 목록으로 표시합니다. 이 방식은 저장 버튼을 클릭하면 즉시 메모가 페이지에 표시되도록 합니다.
이제 page/index.astro 파일에서 NoteAddButton을 가져와 <main> 태그 내에서 사용해야 합니다.
import NoteAddButton from "../components/NoteAddButton.jsx"---
<Layout title="Welcome to Astro.">
<main>
<NoteAddButton client:load />
</main>
</Layout>
브라우저로 돌아가면 페이지에 렌더링된 입력 요소와 버튼을 볼 수 있습니다. 입력 필드에 내용을 입력하고 저장 버튼을 클릭하면 메모가 즉시 페이지에 표시되며, 브라우저를 새로 고쳐도 페이지에 유지됩니다.
두 프레임워크 간 상태 공유
React와 Solid.js 간에 상태를 공유하는 방법을 알아보겠습니다. 먼저 다음 명령어를 실행하여 프로젝트에 Solid를 추가합니다.
npx astro add solid
다음으로, 다음 명령어를 실행하여 Solid.js용 Nano Stores를 추가합니다.
npm i nanostores @nanostores/solid
Solid.js에서 UI를 생성하려면 src/comComponents 디렉터리로 이동하여 Notes.js라는 새 파일을 만들고, 그 안에 Notes 컴포넌트를 생성합니다.
import {useStore} from "@nanostores/solid"
import {notes} from "../noteStore"
import {For} from "solid-js"
export default function Notes() {
const $notes = useStore(notes)
return(
<>
<h1>My notes</h1>
<ul>
<For each={notes()} />
{(note) => <li>{note}</li>}
</For>
</ul>
</>
)
}
이 파일에서는 저장소에서 노트를 가져와 각 노트를 반복하여 페이지에 표시합니다.
Solid.js로 만든 Note 컴포넌트를 표시하려면 page/index.astro 파일로 이동하여 NoteAddButton을 가져온 후 <main> 태그 내에서 사용하십시오.
import NodeAddButton from "../components/NoteAddButton.jsx"import Nodes from "../components/Notes.jsx"
---
<Layout title="Welcome to Astro.">
<main>
<NoteAddButton client:load />
<Notes client:load />
</main>
</Layout>
이제 브라우저에서 입력 필드에 내용을 입력하고 저장 버튼을 클릭하면 메모가 페이지에 표시되며, 렌더링 간에도 유지됩니다.
Astro의 다른 새로운 기능
이러한 기술을 활용하면 아스트로 애플리케이션 내에서 상태를 효과적으로 관리하고 컴포넌트와 프레임워크 간에 상태를 공유할 수 있습니다. 뿐만 아니라 아스트로는 데이터 수집, HTML 축소, 병렬 렌더링 등 다양한 편리한 기능을 제공합니다.