01 · 도구
각자 한 가지 일을 끝까지 잘합니다. 따로 써도 좋고, 함께 쓰면 더 잘 맞도록 만들었습니다.
상태React + React Native
훅 하나로 공유하고,저장은 내가 정할 때.
Provider·액션·리듀서 없이 여러 컴포넌트가 같은 값을 읽습니다. 선택한 값이 바뀔 때만 다시 그리고, 저장과 복원은 정확히 원하는 순간에 일어납니다.
npm install @kkwaenggwari/restate실시간
어느 쪽 버튼을 눌러도 같은 restate() 값을 읽는 두 패널이 함께 바뀝니다. 배송 배지는 선택한 조건만 구독합니다.
헤더
2 개 담김
상품 목록
2 개 담김
모션 엔진React DOM
값 하나로,화면 전체를 지휘합니다.
React Native Animated의 timing·spring·interpolate를 React DOM에서 그대로 씁니다. 값 하나가 여러 요소의 style을 움직이고, 프레임마다 React를 다시 그리지 않습니다.
npm install @kkwaenggwari/animated실시간
슬라이더는 Value 하나만 바꿉니다. 열두 도형의 위치·회전·크기·모서리가 모두 그 값에서 파생됩니다. 스프링을 보낸 뒤 도중에 슬라이더를 잡아 보세요.
완성 컴포넌트React · React Native
어려운 인터랙션은이미 끝내 두었습니다.
굴러가는 숫자, 따라 움직이는 하이라이트, 바뀐 항목만 움직이는 목록, 시트와 스와이프 동작까지. Provider나 설정 호출 없이 데이터만 넘기면 React와 React Native에서 동작합니다.
npm install @kkwaenggwari/animated-chorus @kkwaenggwari/animated실시간
기간을 고르면 MotionHighlight가 이동하고, MotionNumber가 굴러가고, ProgressRing이 차오르고, MotionList는 바뀐 행만 움직입니다.
방문
1,284
예시 데이터
02 · 합주
이 무대는 Animated로 만들었습니다. 스크롤 진행을 담은 Value 하나가 도형 48개의 위치·회전·크기·투명도를 한꺼번에 지휘합니다.
흩어진 점들이 징의 동심원으로 모입니다.
울림이 세 갈래로 나뉘어 각 도구의 색을 입습니다.
상태의 연결, 모션의 궤적, 합창의 기둥이 됩니다.
모두가 한 줄로 서서 같은 박자에 정착합니다.
progress
03 · 원칙
감싸는 Provider나 전역 설정을 먼저 요구하지 않습니다. 앱이 필요로 할 때 기능을 더합니다.
선택한 값이 바뀐 컴포넌트, 값을 쓰는 요소, 움직인 행만 갱신합니다.
중간에 끊긴 모션은 화면에 보이는 그대로 이어지고, 주인이 사라지면 구독과 애니메이션을 정리합니다.
모든 패키지에 TypeScript 선언이 들어 있고, 문서는 39개 언어로 읽을 수 있습니다.
04 · 이름
풍물에서 꽹과리를 치는 상쇠가 합주 전체의 박자를 이끕니다. 우리가 만드는 도구도 그렇습니다. 작지만 또렷하게, 앱 전체가 같은 박자로 움직이도록.
kkwaenggwari이름은 채로 치는 한국의 작은 징, 꽹과리에서 왔습니다. 작지만 또렷한 존재감을 가진 오픈소스 도구를 만듭니다.