Kerros

한국어

Kerros

컴포넌트 트리를 따라가는 상태 관리

어떤 React Hook이든 selector 중심 Store로 바꿉니다. 각 Provider는 안정적인 경계가 되고 선택한 값이 바뀐 컴포넌트만 다시 렌더링됩니다.

Coding Agent에 붙여넣어 패키지와 Skill 설치

현재 프로젝트의 패키지 매니저로 @violetflux/kerros를 설치한 다음 npx skills add violetflux/kerros --skill kerros --agent '*' -y를 실행해 호환되는 모든 Coding Agent에 Kerros Skill을 설치하세요.

시작하기 GitHub 보기

createStore · Provider · selector

세 단계로 상태 공유

평범한 Hook을 createStore에 전달하고 Provider를 마운트한 다음 컴포넌트에 필요한 값만 선택하세요.

import { createStore } from '@violetflux/kerros'
import { useState } from 'react'

const [useCounter, CounterProvider] = createStore(() => {
  const [count, setCount] = useState(0)
  return { count, setCount }
})

function Counter() {
  const { count, setCount } = useCounter(s => ({
    count: s.count,
    setCount: s.setCount,
  }))

  return <button onClick={() => setCount(count + 1)}>{count}</button>
}

<CounterProvider>
  <Counter />
</CounterProvider>

◎

Selector 중심

컴포넌트에 필요한 값만 객체로 선택하고 최상위 필드를 Object.is로 비교합니다.

⌁

Hook 네이티브

Store는 평범한 이름 있는 React Hook입니다. useState, useReducer, SDK Hook을 그대로 사용합니다.

◇

조합 가능

Provider를 중첩해 내부 Store가 외부 Store를 명시적인 단방향 의존성으로 사용할 수 있습니다.

↗

React 17–19

공식 external-store shim을 사용하며 가능하면 React의 네이티브 구현을 우선합니다.