useState prev
React-hook 중 하나인 useState를 하나의 함수에서 여러번 사용할 경우 원하는대로 결과가 안나오는 문제가 생길 수 있다.
아래는 카운트 값에 1,3,5,7을 차례대로 올려 결론적으로 버튼을 한 번 누르면 16이 오르길 바라고 만든 코드이다.
import { useState } from "react";
export default function StatePrevPage() {
const [count, setCount] = useState(0);
const onClickCount = () => {
setCount(count + 1);
setCount(count + 3);
setCount(count + 5);
setCount(count + 7);
};
return (
<div>
<div>Count:{count}</div>
<button onClick={onClickCount}>Count Up</button>
</div>
);
}
하지만 실제로 작동을 시켜보면 16이 아니라 7이 오른다.
받아오는 count 값이 +1,+3,+5가 된 값이 아니라 처음상태인 0에서 받아오기 때문에 벌어지는 일이다.
그래서 이를 방지하기 위해 prev라는 기능을 사용한다.
아래와 같이 코드를 사용하면 16이 정상적으로 올라가는 것을 확인할 수 있다.
import { useState } from "react";
export default function StatePrevPage() {
const [count, setCount] = useState(0);
const onClickCount = () => {
setCount((prev) => prev + 1);
setCount((prev) => prev + 1);
setCount((prev) => prev + 1);
setCount((prev) => prev + 1);
setCount((prev) => prev + 1);
};
return (
<div>
<div>Count:{count}</div>
<button onClick={onClickCount}>Count Up</button>
</div>
);
}
Author And Source
이 문제에 관하여(useState prev), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ssjjyy/useState-prev저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)