JavaScript 애플리케이션에서 전역 상태를 관리하는 것은 특히 React와 비React 컨텍스트 모두에서 액세스해야 하는 경우 어려울 수 있습니다. 기존 라이브러리에는 설정이 많이 필요하고 불필요한 복잡성이 수반되며 React와 긴밀하게 결합되는 경우가 많습니다. 하지만 종이 접기의 우아함과 단순함으로 상태를 관리할 수 있다면 어떨까요? Origami-State-Manager(OSM)를 입력합니다.

OSM이란 무엇인가요?

OSM(Origami-State-Manager)("굉장하다"라고 발음함)는 간단하고 유연하며 확장 가능하도록 설계된 경량 상태 관리 라이브러리입니다. 평범한 종이를 복잡한 디자인으로 바꾸는 일본의 종이접기 기술에서 영감을 받은 OSM을 사용하면 동일한 우아함으로 응용 프로그램의 전역 상태를 관리할 수 있습니다. 종이와 마찬가지로 놀라울 정도로 가볍기 때문에 단순성과 성능이 중요한 응용 분야에 적합합니다.

왜 OSM을 사용하나요?

OSM을 구축하기 위한 여정은 다음을 수행할 수 있는 솔루션을 찾는 것에서 시작되었습니다.

• 보일러플레이트 최소화: 상태 관리는 간단해야 하며 가능한 한 적은 설정만 필요합니다.
• 다재다능함: React 컨텍스트와 비React 컨텍스트 모두에서 원활하게 작동합니다.
• 경량 유지: 불필요한 코드로 번들을 부풀리는 것을 방지하세요.
• 유연함과 확장성을 유지하세요: 성능을 유지하면서 다양한 프로젝트 요구 사항에 쉽게 적응하세요.

과도하게 설계된 솔루션에 지쳤고 딱 작동하는 솔루션을 원한다면 OSM이 필요한 "멋진" 도구일 수 있습니다.

주요 기능

• 최소 설정: 깔끔하고 직관적인 API로 전역 상태를 빠르게 정의하고 관리하세요.
• React 및 Non-React 호환성: React 구성 요소와 일반 JavaScript 함수 모두에서 상태에 액세스하고 업데이트할 수 있습니다.
• 경량: 종이처럼 가벼운 OSM은 앱의 속도와 반응성을 높여줍니다.
• 지속성 옵션: 간단한 구성으로 상태를 지속되게 만드세요.

OSM 시작하기

앱에 OSM 느낌을 추가할 준비가 되셨나요? 시작하는 방법은 다음과 같습니다.

1. 라이브러리 설치:

npm install origami-state-manager

2. 상점 만들기:

스토어는 전 세계의 모든 주가 거주하는 곳입니다. 설정은 초기 상태 값을 createStore:
에 전달하는 것만큼 쉽습니다.

// store.ts
import { createStore } from "origami-state-manager";

const initialValues = {
  origami: 0,
  osmness: 0,
};

export const store = createStore(initialValues);

스토어 이름을 제공하여 스토어를 영구화할 수도 있습니다.

export const store = createStore(initialValues, "myOSMness");

3. 액세스 및 업데이트 상태:

React 구성요소의 경우 useStateListener 후크를 사용하여 상태에 액세스하고 업데이트합니다.

import { store } from "./store";
import { useStateListener } from "origami-state-manager";

function OrigamiComponent() {
  const origami = useStateListener("origami", store);

  return (
     store["origami"].value = new Date().getSeconds()}>
      Origami Count: {origami}
    
  );
}

4. 비React 함수의 액세스 상태:

React 외부에서도 상태를 사용하여 쉽게 작업할 수 있습니다.

// utils.js

function getProfile() {
  let profile = store["profile"].value;
  if (!profile) {
    store["profile"].value = {};
  }

  return store["profile"].value;
}

사용 사례

OSM은 다음과 같은 시나리오에 적합합니다.

• 간단한 전역 상태 관리를 위해서는 경량 솔루션이 필요합니다.
• 프로젝트에 전역 상태를 공유해야 하는 React 로직과 비React 로직이 모두 포함되어 있습니다.
• Redux 또는 MobX와 같은 대규모 라이브러리의 복잡성을 피하고 싶습니다.

주의: 앞으로 몇 가지 문제가 발생할 수 있습니다!

OSM은 아직 초기 단계에 있으며 모든 환경에서 완전히 테스트되지 않았습니다. 소규모 프로젝트와 간단한 상태 요구 사항에 이상적이지만 복잡한 시나리오에서 사용할 때는 주의하는 것이 좋습니다. 문제가 발생하면 도서관이 계속해서 개선될 수 있도록 신고해 주세요.

OSM에 기여하기

OSM을 더욱 멋지게 만드는 데 관심이 있으신가요? 기여를 환영합니다! 시작하려면 기여 지침을 확인하세요.

최신 소식 유지

변경 로그는 모든 새로운 변경 사항과 개선 사항으로 정기적으로 업데이트됩니다.

최종 생각

Origami-State-Manager(OSM)는 부풀림 없이 글로벌 상태 관리를 위한 간단하면서도 강력한 솔루션을 제공하는 것을 목표로 합니다. 설정을 최소화하고 성능을 높게 유지함으로써 OSM을 사용하면 상태 복잡성으로 씨름하는 대신 기능 구축에 집중할 수 있습니다.

이것을 시도해보고 프로젝트에서 새로운 수준의 OSM다움을 경험해 보세요!

오늘 OSM을 시작해보세요: npm: origami-state-manager