Astro 애플리케이션에서 상태를 관리하는 방법

Astro 프레임워크로 애플리케이션을 구축할 때 애플리케이션 상태를 관리하는 방법이나 구성 요소와 프레임워크 간에 이를 공유하는 방법이 궁금할 수 있습니다. Nano Stores는 React, Preact, Svelte, Solid, Lit, Angular 및 Vanilla JS와 함께 작동한다는 사실 덕분에 Astro의 최고의 상태 관리자 중 하나입니다.

Astro 프로젝트 내에서 상태를 관리하는 방법을 알아보세요. 상태 관리를 위해 Nano Store를 사용하고 React와 Solid.js 구성 요소 간에 상태를 공유하는 기본 메모 작성 애플리케이션을 만들려면 간단한 단계를 따르세요.

아스트로란 무엇인가?

Astro 프레임워크를 사용하면 React, Preact, Vue 또는 Svelte와 같은 널리 사용되는 UI 프레임워크 위에 웹 애플리케이션을 만들 수 있습니다. 프레임워크는 구성 요소 기반 아키텍처를 사용하므로 Astro의 각 페이지는 여러 구성 요소로 구성됩니다.

페이지 로드 시간을 단축하기 위해 프레임워크는 클라이언트 측 JavaScript 사용을 최소화하고 대신 서버에서 페이지를 미리 렌더링합니다.

Astro는 콘텐츠 중심 웹사이트를 게시하는 데 이상적인 도구로 설계되었습니다. 상호작용보다는 콘텐츠에 중점을 둔 블로그, 랜딩 페이지, 뉴스 웹사이트 및 기타 페이지를 생각해 보세요. 대화형으로 표시한 구성 요소의 경우 프레임워크는 해당 대화형을 활성화하는 데 필요한 최소한의 JavaScript만 보냅니다.

설치 및 설정

이미 Astro 프로젝트를 실행 중이라면 이 섹션을 건너뛰세요.

하지만 Astro 프로젝트가 없다면 하나를 만들어야 합니다. 이에 대한 유일한 요구 사항은 Node.js 로컬 개발 머신에 설치됩니다.

새로운 Astro 프로젝트를 생성하려면 명령 프롬프트를 실행하고 프로젝트를 생성하려는 디렉터리로 이동한 후 다음 명령을 실행하세요.

 npm create astro@latest

Astro를 설치하려면 “y”라고 답하고 프로젝트 폴더 이름을 입력하세요. Astro를 참고하시면 됩니다. 공식 설정 튜토리얼 도중에 막히면.

프로젝트 생성이 완료되면 다음 명령을 실행하세요(이렇게 하면 프로젝트에 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 웹 브라우저에서 웹사이트 미리보기를 확인하세요.

Astro 프로젝트가 모두 설정되면 다음 단계는 애플리케이션 데이터용 저장소를 만드는 것입니다.

노트 저장소 만들기

애플리케이션 루트의 /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>
    </>
  )
}
 

이 코드는 입력 내용을 입력할 때 구성 요소의 상태에 메모를 추가합니다. 그런 다음 버튼을 클릭하면 메모가 스토어에 저장됩니다. 또한 상점에서 메모를 가져와 정렬되지 않은 목록에 표시합니다. 이 접근 방식을 사용하면 저장 버튼을 클릭한 후 즉시 메모가 페이지에 표시됩니다.

이제 페이지/index.astro 파일에서 NoteAddButton을 가져와서

 import NoteAddButton from "../components/NoteAddButton.jsx"
---
<Layout title="Welcome to Astro.">
  <main>
    <NoteAddButton client:load />
  </main>
</Layout> 

 npx astro add solid

 npm i nanostores @nanostores/solid

 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> 
    </>
  )
}
 

 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>