react 리액트 setState 바로 적용되지 않는 이유

[state, setState] = useState();

[state, setState] = useState(true);

function handler(){
	setState(!state);
    setState(!state);
}

 

이렇게 사용할 경우 아무런 변화가 없을 걸 기대하지만 실제로는 true => false로 바뀌어 작용한다.

그 이유는 리액트가 컴포넌트를 불러올때 state의 값도 불러오기 때문에

setState(!true);
setState(!true);

처럼 되는 셈이다.

 

그런데

[state, setState] = useState(true);

function handler(){
	setState((prev)=>!prev);
    setState((prev)=>!prev);
}

 

와 같이 코드를 작성할 경우 두번째로 prev를 불러오는 시점에서는 첫번째 setState로 인해 변경 계획 리스트에 담겨진 state값을 가져오기 때문에

우리가 처음 예상한대로 아무런 변화가 없는 것을 알 수  있다

setState(!true);
setState(!false);

처럼 되는 셈이다.

 

리액트에서는 state를 변경해도 바로 반영되지 않고 변경할 계획 리스트에 넣어두는 개념이기 때문에 이 부분을 고려해서 코드를 작성해야한다.

 

 

 

몇년 후 새로운 라이브러리가 생기면 또 그만의 특징을 배워야 한다니... 백엔드 공부를 해야하나 싶다.