a. 상탯값을 추가하기 위한 hook
b. 초기값을 넣어서 세팅하고, 배열을 반환함
ex) const [count, setCount] = useState(0);c. useState로 생성된 상태값 변경 함수를 여러번 호출 했을때, 원하는 대로 변경되지 않을 수 있음.
function onClick() {
setCount(count + 1);
setCount(count + 1);
}=> 상태값 변경 함수는 비동기이면서 batch로 처리됨(효율적인 렌더링을 위해)
=> 만약 동기로 처리하면?
하나의 상태값 변경 함수가 호출될 때마다 렌더링을 해야하기 때문에, 성능 이슈 발생 여지가 있음.c-1. 해결 방법
- 상태값 변경 함수에 함수 자체를 매개변수로 넘겨줌
function onClick() {
setCount(v => v + 1);
setCount(v => v + 1);
}=> 이전 상태값을 함수 형태로 쥐고 있다가, 상태값 변경이 필요할 때 사용(callback)
d. 리액트에서 관리하지 않는 외부 호출 이벤트일 경우, 배치로 묶이지 않음.
export default function App() {
function onClick() {
setCount(v => v + 1);
setCount(v => v + 1);
}
useEffect(() => {
window.addEventListener('click',onClick);
return () => window.removeEventListener('click',onClick);
});
<HTML>
}=> React Batch로 렌더링 1회 발생 + 외부 호출 이벤트로 1회 발생
총 2회 렌더링
d-1. 해결 방법
- ReactDOM.unstable_batchedUpdates 사용
export default function App() {
function onClick() {
ReactDOM.unstable_batchedUpdates(() => {
setCount(v => v + 1);
setCount(v => v + 1);
})
}
useEffect(() => {
window.addEventListener('click',onClick);
return () => window.removeEventListener('click',onClick);
});
<HTML>
}=> batch로 묶여서 총 1회 호출
총 1회 렌더링
e. 여러개의 상태값을 1개의 객체로 묶어서 관리
ex) const [count, setCount] = useState({name: '', age: 0});- 값을 할당할 때에는 스프레드(Spread) 연산자 사용
<input type='text' onChange={e => setState({...state, name: e.target.value})} />=> 하지만, 여러개의 상태값 관리에는 useReducer를 사용하는 것이 더 적합함.
