useReducer먼저, useReducer는 어떤 역할을 하는지 간단히 정리하고 넘어가려 한다.useReducer는 useState를 온전히 대체할 수 있는 메서드로,useState로 관리되는 상태들은 모두 컴포넌트 내부에서만 관리되어야 하며, 관련 로직도 모두 컴포넌트 내부에서만 작성되어야 한다. 때문에 UI 렌더링만 담당하면 되는 App 컴포넌트에서 굳이 노출될 필요 없는 로직들이 useState에 의해 모두 담겨있어야 하고, 이는 가독성과 유지보수성을 해친다. 이렇게 useState로 인해 컴포넌트 내부 코드가 쓸데없이 복잡해질 경우, useReducer를 사용해서 상태 관리 함수들을 모두 외부로 분리하여 컴포넌트를 정리할 수 있다. 단, 그렇다고 해서 모든 state를 useReducer로 사용..

setCount((prev) => prev + 1);리액트를 하다 보면 이러한 형태의 setter 함수를 쓰게 된다. 이는 `useState`의 setter 함수에서 콜백 형태로 상태를 업데이트 하는 것인데, 이를 '함수형 업데이트' 방식이라고 한다. 이번에는 값 기반 업데이트와 함수형 업데이트의 차이, 그리고 함수형 업데이트에 담긴 '클로저'에 대해 이해해보려고 한다. (사실 후자가 목적) 1. 값 기반 업데이트 (단순히 '새 값'으로 상태 변경)const CountExample = () => { const [count, setCount] = useState(0); const action = async () => { const n = await new Promise((resolve) => s..