useState 훅은 어떻게 사용하나요?

Q: useState 훅이란 무엇인가요?
A: useState 훅은 React 함수형 컴포넌트에서 상태(state)를 관리하기 위해 사용하는 훅(hook)입니다. 컴포넌트 내에서 상태 값을 선언하고, 이 값을 변경할 수 있는 함수를 제공합니다.

Q: useState 훅은 어떻게 임포트하나요?
A: React에서 useState 훅을 사용하려면 컴포넌트 상단에서 다음과 같이 임포트합니다.
```javascript
import React, { useState } from 'react';
```

Q: useState 훅으로 상태를 선언하는 기본 문법은?
A: 상태 변수와 상태 변화를 위한 setter 함수를 배열 비구조화 할당을 통해 선언합니다.
```javascript
const [state, setState] = useState(initialState);
```
여기서 `state`는 현재 상태 값, `setState`는 상태를 갱신하는 함수, `initialState`는 초기 상태 값입니다.

Q: useState 초기값으로 어떤 값을 넣을 수 있나요?
A: 숫자, 문자열, 배열, 객체, 불리언 등에 모두 사용할 수 있습니다. 초기값은 상태의 초기 상태를 의미합니다.

Q: 상태 값을 업데이트하려면 어떻게 하나요?
A: `setState` 함수를 호출하여 상태를 변경합니다. 예를 들어:
```javascript
setState(newValue);
```
이렇게 하면 React가 상태를 갱신하고 컴포넌트를 리렌더링합니다.

Q: 상태값을 이전 상태를 기반으로 업데이트하려면?
A: 함수형 업데이트를 사용합니다. 상태 setter 함수에 콜백을 넘겨 이전 상태를 인자로 받아 변화를 적용합니다.
```javascript
setState(prevState => prevState + 1);
```

Q: useState 훅은 컴포넌트가 렌더링 될 때마다 초기값을 다시 계산하나요? A: 기본적으로는 `initialState` 값만 첫 렌더링 때 한 번만 사용됩니다. 그러나 계산 비용이 높은 초기값이라면, lazy initialization 패턴으로 함수를 전달할 수 있습니다.
```javascript
const [count, setCount] = useState(() => expensiveComputation());
```

Q: 여러 개의 상태를 useState 훅으로 관리할 수 있나요?
A: 네, 여러 개의 상태 변수를 각각 useState로 분리해 선언할 수 있습니다.
```javascript
const [name, setName] = useState('');
const [age, setAge] = useState(0);
```

Q: 객체 형태의 상태를 useState로 관리할 때 주의할 점은?
A: 객체를 업데이트할 때는 불변성을 유지하며 부분 업데이트가 필요합니다.
```javascript
setState(prevState => ({ ...prevState, propertyToUpdate: newValue }));
```

Q: useState 훅 사용 시 자주 발생하는 실수는?
A: - 상태 값을 직접 변경(mutate)하는 실수
- setState 호출 시 값을 병합하지 않고 덮어쓰기
- 상태 초기 값을 렌더링 시마다 재계산
- 비동기 업데이트 시 이전 상태를 고려하지 않음

Q: 요약하면 useState 훅을 어떻게 사용하나요?
A: 1) React에서 useState 임포트
2) `[state, setState]` 형태로 상태 선언
3) 초기값 지정
4) `setState`를 이용해 상태 업데이트
5) 상태가 바뀌면 자동으로 컴포넌트가 다시 렌더됨

---
이상으로 useState 훅 사용법에 대한 FAQ였습니다.

`useState` 훅은 React에서 상태(state)를 관리하기 위해 사용하는 기본적인 훅입니다.

함수형 컴포넌트에서 상태를 선언하고 업데이트할 수 있게 해줍니다.

`useState`를 사용하면 클래스형 컴포넌트에서의 `this.state`와 `this.setState`를 사용하는 것과 유사한 방식으로 상태를 관리할 수 있습니다.

기본 사용법 `useState` 훅은 React에서 import하여 사용할 수 있습니다.

기본적인 사용법은 다음과 같습니다: ```javascript import React, { useState } from 'react'; function Counter() { // count라는 상태 변수와 setCount라는 상태 업데이트 함수를 선언합니다.

const [count, setCount] = useState(0); // 초기값은 0입니다.

return (

현재 카운트: {count}

setCount(count + 1)}>증가 setCount(count - 1)}>감소

); } ``` 위의 예제에서 `useState(0)`는 `count`라는 상태 변수를 0으로 초기화합니다.

`setCount`는 `count`의 값을 업데이트하는 함수입니다.

버튼 클릭 시 `setCount`를 호출하여 상태를 변경할 수 있습니다.

상태의 초기값 `useState`의 인자로 전달하는 값은 상태의 초기값입니다.

이 값은 컴포넌트가 처음 렌더링될 때만 사용되며, 이후에는 상태가 업데이트될 때마다 초기값으로 돌아가지 않습니다.

초기값은 기본 데이터 타입(숫자, 문자열, 불리언 등)뿐만 아니라 객체나 배열도 가능합니다.

```javascript const [user, setUser] = useState({ name: '', age: 0 }); ``` 상태 업데이트 상태를 업데이트할 때는 `setCount`와 같은 업데이트 함수를 사용합니다.

이 함수는 새로운 상태 값을 인자로 받습니다.

상태 업데이트는 비동기적으로 이루어지므로, 이전 상태를 기반으로 새로운 상태를 설정할 때는 함수형 업데이트를 사용하는 것이 좋습니다.

```javascript setCount(prevCount => prevCount + 1); ``` 여러 개의 상태 `useState`를 여러 번 호출하여 여러 개의 상태 변수를 관리할 수 있습니다.

각 호출은 독립적인 상태를 생성합니다.

```javascript const [name, setName] = useState(''); const [age, setAge] = useState(0); ``` 배열이나 객체 상태 관리 배열이나 객체와 같은 복잡한 상태를 관리할 때는 상태를 불변성을 유지하면서 업데이트해야 합니다.

예를 들어, 배열에 새로운 항목을 추가할 때는 다음과 같이 할 수 있습니다.

```javascript const [items, setItems] = useState([]); const addItem = (newItem) => { setItems(prevItems => [...prevItems, newItem]); }; ``` 객체의 경우에도 마찬가지로 불변성을 유지해야 합니다.

```javascript const [user, setUser] = useState({ name: '', age: 0 }); const updateName = (newName) => { setUser(prevUser => ({ ...prevUser, name: newName })); }; ``` 주의사항 1. 비동기적 업데이트 : `setState`는 비동기적으로 작동하므로, 상태 업데이트 후 바로 상태를 읽는 것은 이전 상태를 읽을 수 있습니다.

따라서 상태 업데이트 후의 값을 사용해야 할 경우, 함수형 업데이트를 사용하는 것이 좋습니다.



2. 렌더링 : 상태가 변경되면 컴포넌트가 다시 렌더링됩니다.

따라서 불필요한 렌더링을 피하기 위해 상태를 적절히 관리해야 합니다.



3. 조건부 렌더링 : 상태에 따라 컴포넌트의 렌더링을 조건부로 제어할 수 있습니다.

예를 들어, 특정 상태에 따라 다른 UI를 보여줄 수 있습니다.

결론 `useState` 훅은 React에서 상태를 관리하는 데 매우 유용한 도구입니다.

함수형 컴포넌트에서 간편하게 상태를 선언하고 업데이트할 수 있게 해주며, 상태의 초기값, 업데이트 방법, 여러 상태 관리 등 다양한 기능을 제공합니다.

React의 상태 관리 패턴을 이해하고 활용하는 데 있어 `useState`는 필수적인 부분입니다.