React useState()

Creator

Creator

Seonglae Cho

Created

Created

2021 Mar 30 15:36

Editor

Editor

Seonglae Cho

Edited

Edited

2024 Feb 15 15:58

Refs

Refs

setState의 기본적인 작동 방식은 Asynchronous

That means if you don’t need render, use
React useRef()

여러 차례 setState가 있을 경우 다른 state의 변경까지 한꺼번에 통합해서 리액트 자신이 판단하기에 가장 적절한 시기에 DOM을 re-rendering

batching

동기적으로 re-rendering 하는 것이 비효율적

개념적으로, React 는 각 컴포넌트가 단일 업데이트 큐를 가지고 있다고 간주

그래서

React useEffect()

내부적으로 클래스가 아니면서 상태관리를 하기 위해서 이전 함수

JS Lexical Environment 를 기억하고 있어야 하는데, 리액트 훅의 useState는

JS Closure 특성으로 구현

React Hooks에서 SetState 비동기 해결하기

React에서는 한 함수 안에서 setState를 하고 console.log 를 하면 console에는 한 박자씩 느리게 찍혀 나오는 경우가 생긴다. Class형 Component에서는 다음과 같이 callback 함수로 해결할 수 있다. 👇🏻해결법 하지만 Hooks에서는 위와 같은 방법으로는 해결이 되지 않는다. 하.지.만? Hooks에는 Effect Hook 이라는 엄청난 녀석이 있다.

React Hooks에서 SetState 비동기 해결하기

https://velog.io/@seob/React-Hooks%EC%97%90%EC%84%9C-SetState-%EB%B9%84%EB%8F%99%EA%B8%B0-%ED%95%B4%EA%B2%B0%ED%95%98%EA%B8%B0

React Hooks에서 SetState 비동기 해결하기

[Reactjs] setState() 왜 비동기로 처리되는가?

사실 저는 그동안 setState 가 왜 비동기로 처리되는지에 대한 고민을 한적이 없습니다. 누군가가 sns에 올린 글을 보고서야 이게 비동기로 처리되는구나 하고 인지하게 되었습니다. 이왕 알게된거 왜 비동기로 처리되는지 확인해보려 합니다. 먼저, 저는 일괄(batch) 업데이트를 위해 조정(reconciliation?)을 지연하는 것이 도움이 된다는데...

https://dongmin-jang.medium.com/reactjs-setstate-%EC%99%9C-%EB%B9%84%EB%8F%99%EA%B8%B0%EB%A1%9C-%EC%B2%98%EB%A6%AC%EB%90%98%EB%8A%94%EA%B0%80-8197d707ca6a

[Reactjs] setState() 왜 비동기로 처리되는가?

비동기로 작동하는 setState 이해하기

Udemy의"Complete React Developer in 2020" 강의에서 학습한 내용을 정리한 포스팅입니다. *자바스크립트와 리액트를 배우는 단계라 오류가 있을 수 있습니다. 틀린 내용은 댓글로 말씀해주시면 수정하겠습니다. 감사합니다.

비동기로 작동하는 setState 이해하기

https://soldonii.tistory.com/112

비동기로 작동하는 setState 이해하기

Recommendations

//////////////