react-native-graph은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

react-native-graph은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

react-native-graph은(는) 아직 유지보수되고 있나요?

활발히 유지보수 중. react-native-graph의 마지막 커밋은 2026년 10월 13일입니다.

react-native-graph은(는) 어디에 사용할 수 있나요?

암호화폐 지갑이나 트레이딩 앱에서 토큰 또는 자산의 가격 이력을 표시합니다. React Native 앱에서 주식 또는 포트폴리오 성과 차트를 보여줍니다. 스크롤 가능한 목록에 스파크라인 스타일의 작은 그래프를 여러 개 렌더링합니다. 사용자가 차트를 드래그할 때 레이블이 업데이트되는 인터랙티브 가격 스크러빙을 구현합니다.

react-native-graph는 어떻게 설치하나요?

peer dependencies인 Reanimated, Gesture Handler, Skia를 설치합니다: yarn add react-native-reanimated react-native-graph 자체를 설치합니다: yarn add react-native-graph GraphPoint 배열과 color prop을 지정해 LineGraph 컴포넌트를 렌더링합니다

react-native-graph은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/margelo/react-native-graph

margelo/react-native-graph

Skia 기반 React Native 선 그래프·차트 컴포넌트로, 애니메이션과 cubic bezier 곡선, 터치 스크러빙을 지원합니다.

GitHub에서 보기 웹사이트

스타: 2,637
포크: 136
열린 이슈: 24
마지막 커밋: 6일 전

어떤 프로젝트인가요?

react-native-graph는 Skia 2D 그래픽 엔진으로 렌더링하는 React Native용 선 그래프 컴포넌트입니다. 부드러운 cubic bezier 곡선을 그리며 데이터 세트 간 애니메이션 전환을 지원합니다. 애니메이션은 UI 스레드에서 실행되어 최대 120 FPS를 지원합니다.

컴포넌트에는 Date와 숫자 값이 포함된 포인트 배열을 전달하며, 사용자 지정 범위를 지정하지 않으면 포인트에 맞게 축 범위를 자동으로 조정합니다. 목록에 여러 그래프를 표시할 때 사용할 수 있는 정적 렌더러도 있습니다. 애니메이션 모드에서는 포인트를 따라 스크러빙하는 팬 제스처, 선택 점, 끝점 표시기, 상단 및 하단 레이블 슬롯을 사용할 수 있습니다.

이 프로젝트는 암호화폐 앱과 지갑을 대상으로 하며, Bamboo 앱에서 토큰 가격 차트를 표시하는 데 사용됩니다. 함께 Reanimated, Gesture Handler, @shopify/react-native-skia가 필요하며, 문서에 명시된 Expo SDK 버전에서는 Expo Go와 함께 사용할 수 있습니다.

핵심 기능

01Skia로 선 그래프를 렌더링하고, 가장자리를 부드럽게 표현하는 cubic bezier 곡선을 지원합니다.
02UI 스레드에서 실행되는 데이터 세트 간 애니메이션 전환을 지원합니다.
03길게 누른 상태에서 팬 제스처로 포인트를 스크러빙하고, 선택 콜백을 받을 수 있습니다.
04목록에 여러 그래프를 가볍게 표시할 수 있는 정적 렌더러 옵션을 제공합니다.
05선택 점, 끝점 표시기, 상단 및 하단 축 레이블을 사용자 지정할 수 있습니다.
06특정 시간 범위나 값 범위를 표시하도록 x축과 y축의 범위를 고정할 수 있습니다.

활용 사례

암호화폐 지갑이나 트레이딩 앱에서 토큰 또는 자산의 가격 이력을 표시합니다.
React Native 앱에서 주식 또는 포트폴리오 성과 차트를 보여줍니다.
스크롤 가능한 목록에 스파크라인 스타일의 작은 그래프를 여러 개 렌더링합니다.
사용자가 차트를 드래그할 때 레이블이 업데이트되는 인터랙티브 가격 스크러빙을 구현합니다.

빠른 시작

1
peer dependencies인 Reanimated, Gesture Handler, Skia를 설치합니다
yarn add react-native-reanimated
2
react-native-graph 자체를 설치합니다
yarn add react-native-graph
3
GraphPoint 배열과 color prop을 지정해 LineGraph 컴포넌트를 렌더링합니다

사용 전 알아둘 점

Reanimated, Gesture Handler, Skia를 함께 설치해야 합니다.
패닝 제스처, 레이블, 선택 점, 그라데이션 채우기는 animated를 true로 설정한 경우에만 작동합니다.
그래프는 데이터를 가져오지 않으므로 포인트를 직접 제공해야 합니다.
x축에서는 범주형 문자열 값을 지원하지 않습니다.

토픽

#react-native #charts #graph #skia #animation #crypto #typescript #mobile #android #animated

자주 묻는 질문

react-native-graph은(는) 무엇인가요?: Skia 기반 React Native 선 그래프·차트 컴포넌트로, 애니메이션과 cubic bezier 곡선, 터치 스크러빙을 지원합니다. react-native-graph는 Skia 2D 그래픽 엔진으로 렌더링하는 React Native용 선 그래프 컴포넌트입니다. 부드러운 cubic bezier 곡선을 그리며 데이터 세트 간 애니메이션 전환을 지원합니다. 애니메이션은 UI 스레드에서 실행되어 최대 120 FPS를 지원합니다.
react-native-graph은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?: react-native-graph은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
react-native-graph은(는) 아직 유지보수되고 있나요?: 활발히 유지보수 중. react-native-graph의 마지막 커밋은 2026년 10월 13일입니다.
react-native-graph은(는) 어디에 사용할 수 있나요?: 암호화폐 지갑이나 트레이딩 앱에서 토큰 또는 자산의 가격 이력을 표시합니다. React Native 앱에서 주식 또는 포트폴리오 성과 차트를 보여줍니다. 스크롤 가능한 목록에 스파크라인 스타일의 작은 그래프를 여러 개 렌더링합니다. 사용자가 차트를 드래그할 때 레이블이 업데이트되는 인터랙티브 가격 스크러빙을 구현합니다.
react-native-graph는 어떻게 설치하나요?: peer dependencies인 Reanimated, Gesture Handler, Skia를 설치합니다: yarn add react-native-reanimated react-native-graph 자체를 설치합니다: yarn add react-native-graph GraphPoint 배열과 color prop을 지정해 LineGraph 컴포넌트를 렌더링합니다
react-native-graph은(는) 어디서 받을 수 있나요?: 소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/margelo/react-native-graph

요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.