> 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-study/hook/usestate.md).

# useState

상태 설정하기 위해서 기존에는 클래스 컴포넌트를 사용해야 했지만 훅의 등장으로 함수형 컴포넌트에서도 상태를 가질 수 있다. 

## 1. useState 사용하기  

* 하나의 인자를 전달 받는 함수이다. 
* 배열을 반환한다. (구조 분해 할당하여 사용하면 편하다.) 
* 반환된 배열의 첫 번째 아이템은 상태(state), 두 번째 아이템은 상태를 업데이트 하는 함수이다. 

useState()은 배열을 반환한다. 그렇기 때문에 바로 배열로 구조분해 할당하면 사용하기 편하다. 반환된 배열의 첫 번째 아이템은 상태(state), 두 번째 아이템은 상태를 업데이트 하는 함수이다. 

```javascript
const [상태, 상태를 업데이트하는 함수] = React.useState(initialValue)
```

{% hint style="info" %}
상태를 업데이트 하는 함수는 일반적으로 `set*` 접두사를 붙여 사용한다. 
{% endhint %}

하나의 상태(state)를 가지는 useState()를 사용했다. 

```javascript
const [headline, setHeadline] = React.useState('React Hook')
const [headlineLang, setHeadlineLang] = React.useState('en')
```

하지만 복잡한 객체 문법을 사용해서 여러 상태를 가지도록 할 수 있다. 

```javascript
const [headline, setHeadline] = React.useState({
    content: 'React Hook'
    lang: 'en' 
})

// 접근하기 
headline.content → 'React Hook'
headline.lang → 'en'
```

## 2. lazy initializer

useState의 초기 값을 일반적인 원시 데이터 값이 아닌 함수로 설정할 수 있다. 이때 유의해야 할 점은 함수 컴포넌트가 렌더링 될 때 사용하지 않는 함수도 실행이 된다는 점이다. 

```javascript
const initialState = calculateSomethingExpensive ( props ) 
const [ count , setCount ] = React.useState ( initialState )  
```

 그래서 함수 컴포넌트 초기 생성 시, 단 한 번만 함수가 실행되도록 콜백 함수를 설정하는데 이를 지연된 초기화(lazy initializer)라고 한다. 

```javascript
const initialState = () => calculateSomethingExpensive ( props ) 
const [ count , setCount ] = React.useState ( initialState )  
```

정리하자면 컴포넌트가 렌더링 될 때마다 함수가 실행되어 성능에 영향을 주는 것을 방지하기 위해서 지연된 초기화(함수)를 사용한다. 이는 함수 컴포넌트 초기 생성 시 한 번만 실행된다. 

#### 2.1 참고

* [useState 지연 초기화 및 함수 업데이트](https://kentcdodds.com/blog/use-state-lazy-initialization-and-function-updates#usestate-lazy-initialization)