지금까지 나는 useState 훅을 사용할 때 앞쪽은 변수, 뒤쪽은 변수 바꿈. 딱 저렇게만 알고 그 외의 내용은 알려고 하지도 않았다. 이러한 사고방식 덕분에 몇 시간 째 useState 훅 가지고 고생하게 되었다.
내가 가진 문제는 이것이었다.
a라는 변수와 b라는 변수가 있을 때, 조건문을 통하여 a와 b의 함수를 생성하였으나 동작이 한 템포 느리게 작동하는 것이었다.
예를 들어 버튼을 누를 때 1. count를 +1 해준다. 2. count가 3회보다 적으면 age도 +1 해준다. 라는 간단한 내용이었다. 나는 이 함수를 이런식으로 만들었었다.
function App(){
let [count, setCount] = useState(0);
let [age, setAge] = useState(20);
return (
<button onClick={()=>{
setCount(count+1);
if ( count < 3 ) {
setAge(age+1);
}
}}>누르면한살먹기</button>
)
}
해당 코드는 코딩애플을 통해 해결을 보았기에 이곳에서 가지고 왔다.
이 코드를 보면 count가 3일 때 age가 늘어나지 않게 설계했으니 age가 22가 되어야 하지만 실제로 돌리면 age가 23까지 늘어나는 모습을 볼 수 있다.
문제 원인
state는 async하게 처리되는 함수기 때문에 sync함수들을 처리한 뒤 나중에 처리하려는 특징이 있다. 그래서 우리가 해석한 코드와 다르게 실제 동작한 코드를 살펴보면
- 버튼을 세번째 누르면 setCount(count+1)이 작동되어 3으로 만들려고 시도한다
- 그런데 1번이 너무 오래 걸리므로 if문 안쪽부터 해결한다
- if문 안의 count는 2이므로 +1을 동작시킨다.
- 이후 count를 3으로 올린다.
이런 방식이었다.
해결 방안
이러한 문제를 해결하는 방식으로는 useEffect를 활용해야 한다. useEffect는 컴포넌트가 렌더링/재렌더링될 때 실행되는 함수인데 대괄호 안에 변수를 집어 넣으면(state) 변수가 변경될 때 코드가 실행된다. 즉, 순차적인 코드 진행을 가져갈 수 있게 된다.
useEffect(()=>{
if(count<3){
age+1
}
},[count]이런 방식으로 코드를 짜게 된다면 드디어 우리가 떠오르는 그 순서대로 작동하는 코드를 볼 수 있다.
참고자료
