react-spring

KO | EN

gitlite — search

#javascript #python #typescript #go #machine-learning #rust #deep-learning #linux #docker #java #awesome #pytorch #openai #open-source

(★ 29,134)

✌️ 스프링 물리학 기반의 React 애니메이션 라이브러리

react-spring 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

![](https://i.imgur.com/QZownhg.png)

# react-spring

### 유연한 도구를 통해 아이디어를 자신감 있게 구현할 수 있도록 도와주는 스프링 물리 기반 애니메이션 라이브러리

[![](https://img.shields.io/npm/v/@react-spring/web.svg?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/@react-spring/web)
[![](https://img.shields.io/npm/dm/@react-spring/web.svg?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/@react-spring/web)
[![Chat on Discord](https://img.shields.io/discord/740090768164651008?style=flat&colorA=000000&colorB=000000&label=discord&logo=discord&logoColor=ffffff)](https://discord.gg/AXfNsGx64f)

`react-spring`은 크로스 플랫폼을 지원하는 스프링 물리 기반 애니메이션 라이브러리입니다.
사용법은 다음과 같이 간단합니다:
```jsx
const styles = useSpring({
from: {
opacity: 0
},
to: {
opacity: 1
}
})
```
저희 라이브러리에 대한 간단한 소개입니다:
- \*\*크로스 플랫폼\*\*: `react-dom`과 `react-three-fiber`를 지원합니다.
- \*\*다재다능함\*\*: 선언형 애니메이션은 물론, 필요에 따라 명령형 방식으로도 사용할 수 있습니다.
- \*\*스프링 물리 우선\*\*: 기본적으로 유연한 상호작용을 위해 스프링을 사용한 애니메이션을 제공하지만, 이징(easing)이 포함된 지속 시간(duration)도 지원합니다.
이 외에도 다양한 기능이 있습니다! 직접 사용해보고 확인해 보세요.
## 시작하기
### ⚡️ 빠른 시작
```shell
# 필요한 타겟 설치
npm install @react-spring/web
# 또는 react-three-fiber의 경우
npm install @react-spring/three
```
```jsx
import { animated, useSpring } from '@react-spring/web'
const FadeIn = ({ isVisible, children }) => {
const styles = useSpring({
opacity: isVisible ? 1 : 0,
y: isVisible ? 0 : 24,
})
return {children}
}
```
`isVisible` 값에 따라 스크롤인 애니메이션을 만드는 것은 이처럼 간단합니다.
### 📖 문서 및 예제
프로젝트에 대한 자세한 문서는 [여기](https://www.react-spring.dev)에서 확인하실 수 있습니다.
각 페이지에는 직접 확인할 수 있는 [예제](https://react-spring.dev/hooks/use-spring#demos)들이 포함되어 있으며, 더 자세히 보려면 [codesandbox에서 열기](https://codesandbox.io/s/github/pmndrs/react-spring/tree/main/demo/src/sandboxes/card)를 통해 확인하실 수 있습니다!
---
## 📣 사용자 평가

![](assets/testimonies.jpg)

## 사용 중인 곳

[![](assets/projects/next.png)](https://nextjs.org/)
[![](assets/projects/csb.png)](https://codesandbox.io/)
[![](assets/projects/aragon.png)](https://aragon.org/)

그 외 [다양한 서비스들...](https://github.com/pmndrs/react-spring/network/dependents)
## 후원자
모든 후원자분들께 감사드립니다! 🙏 이들과 함께하고 싶다면 [Opencollective](https://opencollective.com/pmndrs) 기부를 고려해 보세요.
[![](https://opencollective.com/pmndrs/backers.svg?width=890)](https://opencollective.com/pmndrs#backers)
## 기여자
이 프로젝트는 기여해주신 모든 분들의 덕분에 존재합니다.
[![](https://opencollective.com/pmndrs/contributors.svg?width=890)](https://github.com/react-spring/react-spring/graphs/contributors)

react-spring

react-spring 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

react-spring

react-spring 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README