- 변수 용도로 사용하는 hook
- 사용법
const [변수명, set변수명] = useState(초기값)
- 컴포넌트 최상위 레벨에서만 호출 가능
- 반복문이나 조건문 안에서 호출 불가 (그렇게 쓰고 싶다면 새 컴포넌트 안에서 사용하고 컴포넌트를 호출하는 방식으로 사용)
- set 함수는 반환값이 없음
- set 함수에 함수를 값으로 넣는 것은 불가(화살표 함수(() =>)로 감싸서 전달은 가능은 함)
- 초기화 예시
function MyComponent() {
const [age, setAge] = useState(28);
const [name, setName] = useState('Taylor');
const [todos, setTodos] = useState(() => createTodos());
}
- 특정 함수의 return 값을 기반으로 상태값 초기화 시, 함수 자체를 넘길 것.
const [num, setNum] = useState(runComplexLogic())
runComplexLogic()의 결과값이 초기 렌더링에 사용되지만 그 이후 렌더링에서도 해당 함수는 계속 호출됨
그에 따라, 함수 자체를 Pass
const [num, setNum] = useState(runComplexLogic)
- 의도적으로 컴포넌트의 state를 초기화하고 싶을 경우, 해당 컴포넌트의 key 속성에 다른 값을 전달하면 됨.
(key 속성을 별도로 사용하지 않더라도)
version에 이전과 다른 값을 계속 전달해주면 Form 컴포넌트의 state들이 초기화됨
<Form key={version}>
Form 컴포넌트
function Form() {
const [num, setNum] = useState(0); // 숫자가 변경되더라도 0으로 재초기화됨
}
- set 함수 호출하면서 console.log에 값을 확인해보면 이전 상태값이 표시 (스냅샷처럼 동작하기 때문)
- 이전 상태값을 기반으로 상태값 업데이트 방법
보통 함수 기반으로 파라미터 넘겨줌
setNum(num => num + 1)
set이름(이전값 => 이전값 + 1)
예시,
3연속 호출 시,
setNum(num + 1) // 10 + 1
setNum(num + 1) // 10 + 1
setNum(num + 1) // 10 + 1
최종 num = 11
컴포넌트 리턴 문 안에서 setNum을 호출하는 함수를 여러번 호출해도 결과는 동일
<button onClick{() => {
increment();
increment();
increment();
}}>+3</button>
setNum(num => num + 1) // 10 => 10 + 1
setNum(num => num + 1) // 11 => 11 + 1
setNum(num => num + 1) // 12 => 12 + 1
최종 num = 13
- 객체, 배열 업데이트 시, 기존 객체 변경이 아닌 교체
객체
setForm({
...form,
firstName: 'Taylor'
})
배열
setTodos([
...todos,
{
id: nextId++, ...
}
])
반대로 아래와 같이
form.firstName = 'Taylor' // 교체가 아닌 기존 객체 변경
setForm(form) // 업데이트 무시 == 아무것도 안함
- 핸들러 전달 방법
렌더링 무한 루프 빠짐
return <button onClick={handleClick()}>Click me</button>
함수 자체를 전달하거나 한 번 감싸서 전달(인라인 함수)
return <button onClick={handleClick}>Click me</button>
return <button onClick={(e) => handleClick(e)}>Click me</button>
[출처]
React 공식 문서 (https://ko.react.dev/reference/react/useState)