프로그래밍/ReactJS
useState 동기화 문제
astraljoker
2022. 4. 19. 13:15
728x90
반응형
export default function Test() {
const [value1, setValue1] = useState<number>(0);
const [value2, setValue2] = useState<number>(0);
return (
<>
<div> value1 : {value1} </div>
<div> value2 : {value2} </div>
<button type="submit" onClick={() =>
{
setValue1(prev => prev+1);
setValue2(value1);
}}> 계산
</button>
</>
)
}
얼마 전에 useState를 사용하다가 난감한 상황에 빠져서 해결방법을 공유합니다. 대충 위와 같은 코드를 작성했습니다. 버튼을 클릭할 때마다 value1을 +1시 키고 value2에 대입합니다. 코드만 봤을 때는 두 값이 동시에 올라가야 합니다.
결과는... value2 값이 1 작게 설정됩니다. 이유는 SetValue1 함수를 실행해도 value1 값이 바로 변경되지 않습니다. 이유를 찾아보니 useState의 set 함수는 비동기로 동작합니다. 이해는 가는 게... 동기로 동작하게 되면 set을 할 때마다 렌더링을 하게 되니 퍼포먼스가 떨어지게 될 것입니다. 값은 변경해주고 렌더링만 모아서 해줘도 될 것 같긴 한데.. 아무튼 이유가 있겠죠.
export default function Test() {
const [value1, setValue1] = useState<number>(0);
const [value2, setValue2] = useState<number>(0);
useEffect(() => {
setValue2(value1);
}, [value1]);
return (
<>
<div> value1 : {value1} </div>
<div> value2 : {value2} </div>
<button type="submit" onClick={() =>
{
setValue1(prev => prev+1);
}}> 계산
</button>
</>
)
}
저는 useEffect를 이용해서 해결했습니다. 가까운 길을 멀리 돌아가는 느낌이 들지만 동작하긴 합니다. 네이티브 앱 개발할 때 리액트 네이티브는 제외하기로 결정..
728x90
반응형