useState
의 함수형 업데이트와의 렌더링 시점을 알기 위해 여러 코드를 작성해 봤고 이를 통해 알아낸 부분들을 정리한 글이다.
export default function App() {
const [value, setValue] = useState(0)
const onClick = () => {
setValue(value+1)
setValue(value+1)
setValue(value+1)
}
return (
<div className="App">
<button onClick={onClick}>+</button>
<h1>{value}</h1>
</div>
);
}
답 은 1 이다.
// A = 0
setValue(value+1)
// ① B = A + 1 => 2
setValue(value+1)
// ② B = A + 1 => 2
setValue(value+1)
// ③ B = A + 1 => 2
답 함수형 업데이트를 사용하자!
export default function App() {
const [value, setValue] = useState(0)
const onClick = () => {
setValue(prev => prev+1)
setValue(prev => prev+1)
setValue(prev => prev+1)
}
return (
<div className="App">
<button onClick={onClick}>+</button>
<h1>{value}</h1>
</div>
);
}
// A = 0
// B = A = 0
setValue(prev => prev+1)
// ①-1 : C = B + 1 => 1
// ①-2 : C 를 B 에 저장
setValue(prev => prev+1)
// ②-1 : C = B + 1 => 2
// ②-2 : C 를 B 에 저장
setValue(prev => prev+1)
// ③-1 : C = B + 1 => 3
// ③-2 : C 를 B 에 저장
export default function App() {
const [valueX, setValueX] = useState(0)
const [valueY, setValueY] = useState(0)
const onClick = (e) => {
setValueX(prev => prev + 1);
setValueX(prev => prev + 1);
setValueY(valueX + 1)
}
return (
<div className="App" >
<button onClick={onClick}>+</button>
<h1>valueX : {valueX}</h1>
<h1>valueY : {valueY}</h1>
</div>
);
}
valueY
는 어떤 값을 보여줄까?따라서 2가지의 경우가 나온다
case 1. A(0) + 1 = 1
case 2. B(2) + 1 = 3
용어 정리
X useState -
A : 이번 렌더링 초기(시작) state 값 = 0
B : A 또는 이번 렌더링에서 업데이트된 값 / 다음 렌더링에 사용될 값
C : 함수형 업데이트를 통해 생겨난 값
Y useState -
D : 이번 렌더링의 초기(시작) state 값
E : 저장하여 다음 렌더링에 사용될 state 값
setValueX(prev => prev + 1);
// ①-1 처음 setState 시 B는 A => B = 0
// ①-2 C = B(0) + 1 = 1
// ①-3 C 를 B에 저장
// ①-4 B = 1
setValueX(prev => prev + 1);
// ②-1 C = B(1) + 1 = 2
// ②-2 C 를 B에 저장
// ②-3 B = 2
setValueY(valueX + 1)
// ③-1 E = A + 1 = 1
export default function App() {
const [valueX, setValueX] = useState(0)
const [valueY, setValueY] = useState(0)
const [valueZ, setValueZ] = useState(0)
const onChange = (e) => {
setValueX(prev => prev + 1);
setValueY('')
setValueZ(e.target.value);
}
return (
<div className="App" >
<input onChange={onChange}/>
<h1>valueX : {valueX}</h1>
<h1>valueY : {valueY}</h1>
<h1>valueZ : {valueZ}</h1>
</div>
);
}