> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/react/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/react/react-spring/usespring.md).

# useSpring

## 1. 모듈 불러오기 

```javascript
import {useSpring, animated} from 'react-spring'
```

## 2. 사용하기 

### 2.1 기본 사용 방법 

```javascript
import {useSpring, animated} from 'react-spring'

function App() {
  const props = useSpring({to: {opacity: 1}, from: {opacity: 0}})
  
  return <animated.div style={props}>I will fade in</animated.div>
}
```

### 2.2 useSpring 속성&#x20;

```javascript
  const props = useSpring({
  // 마지막에 보여지는 스타일 속성 
    to: { opacity: 1, color: '#fff' },
  // 처음 보여지는 기본 스타일 
    from: { color: '#73e77f' },
  // 지연 시간 
    delay: 1000,
  })
```

### 2.3 마지막 프레임&#x20;

기본 값(from) 없이 마지막 프레임만 적용할 수 있다.&#x20;

```javascript
const props = useSpring({ opacity: 1, color: '#fff' })
```

### 2.4 조건 처리&#x20;

```javascript
const props = useSpring({opacity: toggle ? 1 : 0})
```

### 2.5 사용자 정의 transition&#x20;

비동기 처리를 통해 사용자가 정의하여 애니매이션 효과를 새롭게 만들 수 있다. 방법1, 방법2 모두 같은 효과를 나타낸다.&#x20;

#### 2.5.1 방법 1

```javascript
  const props = useSpring({
    to: async (next, cancel) => {
      await next({ opacity: 1, color: '#ffaaee' })
      await next({ opacity: 0.5, color: '#73e77f' })
      await next({ opacity: 0, color: '#fbea2a' })
    },
    from: { opacity: 0, color: 'red' },
  })
```

#### 2.5.2 방법 2

```javascript
  const props = useSpring({
    to: [
      { opacity: 1, color: '#ffaaee' },
      { opacity: 0.5, color: '#73e77f' },
      { opacity: 0, color: '#fbea2a' },
    ],
    from: { opacity: 0, color: 'red' },
  })
```

## 3. 키워드&#x20;

| 구분    | 설명                                 |
| ----- | ---------------------------------- |
| to    | 마지막 프레임                            |
| from  | 시작 프레임(기본 )                        |
| delay | <p>지연 시간  </p><p>예) 1000 = 1s </p> |

### 3.1 키워드 단축키&#x20;

```javascript
  const props = useSpring({ to: { opacity: 1, color: '#fff' } })
  
  // 위의 구문을 단축하여 사용하면 
  const props = useSpring({ opacity: 1, color: '#fff' })
```

## 4. 실습&#x20;

{% embed url="<https://codesandbox.io/s/react-spring-gico-silseub-fe0vt?file=/src/App.js>" %}

##