<p>React Hook 함수 업데이트에 관한 문서를 읽는 중 다음 문장을 보았습니다: </p> <인용문> <p>업데이트된 값은 이전 값을 기반으로 하기 때문에 "+" 및 "-" 버튼은 기능적 형식을 사용합니다</p> </인용문> <p>하지만 함수 업데이트의 목적이 무엇인지, 새 상태를 계산할 때 이전 상태를 직접 사용하는 것과 함수 업데이트의 차이점을 알 수 없습니다. </p> <p><strong>React useState Hook의 업데이트 기능에 함수 업데이트 양식이 필요한 이유는 무엇인가요? </strong> <strong>차이가 명확하게 보이는 예는 무엇입니까(따라서 직접 업데이트를 사용하면 오류가 발생함)? </strong></p> <p>예를 들어 문서의 예를 다음과 같이 변경하면 </p> <pre class="brush:php;toolbar:false;">함수 카운터({initialCount}) { const [count, setCount] = useState(initialCount); 반품 ( <> 개수: {개수} <button onClick={() => setCount(initialCount)}>재설정</button> <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button> <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button> </> ); }</pre> <p><code>count</code>를 직접 업데이트하세요. </p> <pre class="brush:php;toolbar:false;">함수 카운터({initialCount}) { const [count, setCount] = useState(initialCount); 반품 ( <> 개수: {개수} <button onClick={() => setCount(initialCount)}>재설정</button> <button onClick={() => setCount(count + 1)}>+</button> <button onClick={() => setCount(count - 1)}>-</button> </> ); }</pre> <p>동작에 아무런 차이가 없으며 개수가 업데이트되지 않거나 최신 상태가 아닌 상황을 상상할 수 없습니다. 개수가 변경될 때마다 최신 개수를 캡처하기 위해 새로운 클로저가 호출되기 때문입니다. </p>