React #8 _ useState 마무리 정리

useState의 값을 조정하기 위해서는 const [a , setA] = useState() 구조에서

setA를 터치해서 조정해야 하는데

 

예를 들어 아래와 같은 구조에서

function handleSetA(n) {

setA(n)

}

 

setA(n) 밑에 예를 들어 console.log(a)를 찍어보면

예상한 값은 n이 나와야 하지만

그렇지 않다.

 

이 함수는 그런 식으로 작동하지 않고

그대로 이전 값인 초기값이 나올 것이다.

 

그래서 이 상황에서 최신화된 값을 가지고 처리하고 싶다면

아래와 같은 방법으로 해야 한다.

 

function handleSetA(n){
setA(n)
setA((prev) => prev + 1);
}

 

만약 초기값이 0이고 n이 1이라면

최종 결과로 a 에는 2가 나올 것이다.

 

결론적으로 위 함수에서 순차적으로 진행될 거 같이 보이나

사실은 그렇지 않고 동시에 실행되는 느낌이다.

그래서 console.log로 찍어보는 건 계속해서 오래된 값을 확인하기 때문에

부적절하고

이 전 값을 받아서 처리하는 방식으로 해야 한다.

 

 

결과적으로 리액트의 속도나 성능을 높이기 위해서 노력을 해야 하는데

그걸 도와주는 MillionJS 같은 최적화 툴도 있다.