리액트에서 setState를 통해서 state를 변경해주는 이유 / setState의 비동기성

리액트를 사용하면서 처음에는 없던 의문이 갑자기 생겼었다.

왜 리액트는 useState라는 훅을 사용해서 상태관리를 하는것인가

물론 훅을 사용해서 라이프사이클을 조작할 수 있게 하여 불필요한 리렌더링을 막아주고, 내가 원하는 시점에 원하는 동작을 하도록 만들어주는 것일 거다.

하지만, 왜!! 자바스크립트에서 변수 사용하듯이 사용하면 안되는것이냐 이게 문득 궁금해졌다

 

이유

state는 immutable(불변성)을 유지해야하기 때문이다.
컴포넌트는 현재의 this.state와 setState를 비교해서 업데이트가 필요한 경우에만 render 함수를 호출하는데, state를 직접 수정하게 되면 리액트가 render 함수를 호출하지 않아 상태 변경이 일어나도 렌더링이 일어나지 않을 수 있다. 

상태 변경을 추적하고 변경에 따라 구성요소를 다시 렌더링하려면 setState를 사용해야한다.

불변성을 유지해야하는 이유는 아래와 같다.

1. setState는 비동기적으로 동작하기 때문에 state가 직접 수정되어 여러번 상태를 업데이트 하는 경우, 이전 업데이트 내용이 다음 업데이트 내용에 덮어 쓰여질 수가 있어 예상치 못한 곳에서 버그가 발생 할 수 있습니다.
2. PureComponent에서 동작하지 않습니다. PureComponent는 this.state와 setState를 비교해 업데이트가 필요한 경우에만 render함수를 호출해 줍니다. 이때, state를 직접 수정하게되면 기존의 this.state와 setState가 동일하므로 리액트는 render함수를 호출하지 않습니다.

결론, state는 꼭 불변성을 유지하도록 직접 수정하지 말자!

 

🤔 이유는 알겠는데 그래서 setState말고 state를 직접 변경해주면 왜 화면 갱신이 안될까?

본론부터 이야기 하자면 state의 저장방식이 '객체'이기 때문이다

그래서 변경한 state가 화면에 보이게 되려면 Update상태에 들어가야 하는데 그러려면...

state 또는 Props가 변경 되어야한다.

이와 관련해서 useState가 const를 사용하는 이유도 같이 정리할 수 있는데, count 변수를 바꿔주는 건데 왜 let이 아닐까? 라고 생각 할 수 있다.

컴포넌트가 다시 렌더링되면 함수가 다시 실행되어 새 scope를 만들고, count변수도 새로 만들게 되고, 이는 이전 변수와 상관이 없게 된다. 그래서 const로 선언된 count 변수는 동일한 scope에서 다시 할당하는 것을 막을 수 있다고 한다!

const [count, setCount] = useState(0);

state가 변경되면 update가 돼야 하는거 아닌가? 라고 생각할 수 있으나, 리액트가 이 값이 변경 됐다는 것을 판단하는 기준이 객체의 메모리 주소이기 때문에, 객체의 주소가 변경되지 않고 내부의 값만 바뀌면 바뀐것으로 인식을 안하기 때문이다.

때문에 직접 변경하지 않고 새로운 객체를 만들어서 할당 하는 것으로 변경해야 하는 것이며 그것을 위해 setState(), useState() 를 사용하는 것이다.

setState()의 특징

1. 기본적으로 비동기로 동작한다.
2. 연속적으로 호출했을 때 리액트 내부적으로는 BATCH 처리를 한다.
3. state 객체를 넘겨줄 수 있을 뿐만 아니라 새로운 state를 반환하는 함수를 인자로 넘겨줄 수 있다.

 

기본적으로 setState()함수는 state를 변경하고 state가 포함된 해당 컴포넌트를 다시 렌더링한다.

그런데 이게 동기적으로 동작하는 것이 아니라 비동기적으로 동작함에 주목해야한다(= setState()를 실행하자마자 바로 state를 변경하고 바로 렌더링하는게 아니다!).

이래서 라이프사이클을 잘 이해하고 사용해야한다.

내가 무작정 이때 값 바꼈겠지~~하고 조건문 쓰다가 로직 잘못 짠 적이 한두번이 아니다

 

나와 같은 사람들을 위해 옛날에 교육하면서 만들었던 퀴즈를 보고 학습해보길 바란다

콘솔에 어떻게 찍힐지 맞춰보면 된다

 

QUIZ 1.

const [value, setValue] = useState(0)

A : 이전 Value 값을 가져오지 못해서 3만 더해진다.

 

QUIZ 2.

A : 이전 Value 값을 가져와서 못해서 1+2+3 이 더해진다.

역시 useEffect 내에서 이전 state 값은 불러오지 못한다.

 

 

진짜 비동기,, 조만간 비동기에 대해 다시 깊이있게 공부해봐야겠다..

 

---

참고

https://rinrin-dev.tistory.com/93

https://velog.io/@wjdcksdud29/React-setState-useState%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0-TIL-53