[React] useState와 updater function

useState

function style component에서 state를 관리할 수 있는 Hook

🧩 사용법

import { useState } from 'react';

function App(){
	return(
		<>
			<MyComponent initNum={2}/>
		</>
	);
}

function MyComponent(props) {
  var [num,setNum]=useState(props.initNum);
  
  const [age, setAge] = useState();
  const [name, setName] = useState('Taylor');
  // ...

📍useState는 2개의 원소를 갖는 배열을 리턴 → array destructing 을 사용

const [state, setState] = useState(initialState);

🧩 updater function

import { useState } from 'react';

export default function Counter() {
  const [number, setNumber] = useState(0);

  return (
    <>
      <h1>{number}</h1>
      <button onClick={() => {
        setNumber(number + 1); // setAge(0 => 1)
        setNumber(number + 1); // setAge(0 => 1)
        setNumber(number + 1); // setAge(0 => 1)
      }}>+3</button>
    </>
  )
}

버튼을 클릭할 때 마다 number의 상태값이 +3 이 되도록 setNumber(number + 1)을 3번 호출했지만 number의 상태값은 3 이 아닌 1 이 된다.

그 이유는, set function은 다음번 렌더링에서만 state를 변경하기 때문이다.

🌟 updater function 을 이용하면 이 문제를 해결할 수 있다.

function handleClick() {
  setAge(a => a + 1); // setAge(0 => 1)
  setAge(a => a + 1); // setAge(1 => 2)
  setAge(a => a + 1); // setAge(2 => 3)
}

📍 updater function은 pending state 를 사용해 queue 에 대기시킨다.

1. 첫번째 setAge 함수는 pending state로 0을 받고 1을 return
2. 두번째 setAge 함수는 pending state로 1을 받고 2를 return
3. 세번째 setAge 함수는 pending state로 2를 받아 3을 return

⇒ 결과적으로 3 이 current state가 돼서 리렌더링 된다.

참고자료
React 공식문서 - useState
React 공식문서 - State as a snapshot
what is 'pending state' in a react - StackOverflow