React의 useState에서 state를 변경할 때, functional update를 사용하는 이유
1. 비동기적 상태 업데이트:
- React의 상태 업데이트는 비동기적으로 처리됩니다. 즉, 여러 번 상태 업데이트 요청을 하면 React는 이를 하나의 렌더링 사이클에서 일괄 처리하는데, 이 과정에서 상태 값이 예상치 못하게 변경될 수 있습니다.
- functional update는 이전 상태 값을 기반으로 새로운 상태 값을 계산하기 때문에, 현재의 상태 값을 신뢰할 수 없을 때 안전하게 상태를 업데이트할 수 있습니다.
2. 이전 상태에 의존하는 경우:
- 새로운 상태가 이전 상태에 의존하는 경우, functional update를 사용하면 더욱 명확하고 안전합니다.(eg. boolean toogle)
- 상태 업데이트 함수는 현재 상태 값을 인자로 받아서 새로운 상태 값을 반환하기 때문에, 여러 번의 상태 업데이트가 충돌 없이 의도한 대로 작동합니다.
예를 들어, 카운터를 증가시키는 코드를 생각해 봅시다.
const [count, setCount] = useState(0);
// 상태 값을 직접 설정하는 경우
setCount(count + 1);
setCount(count + 1); // 예상: 2, 실제: 1
// Functional update를 사용하는 경우
setCount(prevCount => prevCount + 1);
setCount(prevCount => prevCount + 1); // 예상: 2, 실제: 2위의 예제에서 setCount(count + 1)를 두 번 호출하면 최종 값은 1이 됩니다. 이는 첫 번째 호출에서 count는 0이므로, 두 번째 호출에서도 여전히 count가 0인 상태에서 count + 1을 설정하기 때문입니다.
반면, functional update를 사용하면 prevCount가 첫 번째 호출 후 1로 업데이트된 상태에서 두 번째 호출 시 1에서 1을 더한 2가 되어 예상한 대로 동작합니다.
3. 불변성 유지:
React에서는 상태가 불변해야 하며, functional update를 사용하면 이 불변성을 유지하는 데 도움이 됩니다. functional update 패턴은 새로운 상태 값을 반환하여 상태의 불변성을 자연스럽게 유지할 수 있도록 합니다.
결론적으로, functional update를 사용하면 비동기 상태 업데이트로 인한 문제를 방지하고, 이전 상태에 의존하는 로직을 안전하게 처리할 수 있습니다. 이는 코드의 안정성과 예측 가능성을 높이는 데 큰 도움이 됩니다.
web front