갑분 리액트.. 질문입니다..ㅠㅠㅠ 살려주세요

Question

안녕하세요. 리액트 입문자입니다. 현재 setState, useState가 비동기적으로 작동한다는 개념에 대해 질문드립니다.아래와 같은 코드로 인해 궁금증이 생겨서 질문드립니다!!!버튼 누를 때, onClick 함수로 다음과 같은 코드를 실행시키도록 하였습니다.그리고, useEffect로 console.log를 찍어보았습니다.[케이스 1]setCount(count &#43;3);setCount(count &#61;> count &#43; 7);setCount(count &#43; 1);(결과: 1씩만 증가 (*제 생각>> 왜지? 마지막꺼만 되는건가? 해서 아래로 바꿔봄)[케이스 2]setCount(count &#43; 1);setCount(count &#43;3);setCount(count &#61;> count &#43; 7);(결과: 10씩 증가, (*제 생각>> 왜 2,3번째꺼가 작동하지?)[케이스 3]setCount(count &#43; 3);setCount(count &#43; 1);setCount(count &#61;> count &#43; 7);(결과: 8씩 증가, (*제 생각>> 왜2,3번째꺼가 작동하는거지?)도대체 구조가 어떻게 되길래 이렇게 작동하는건지 이해가 안가네요.ㅠㅠ 오래동안 찾아본 결과, [1] state의 비동기 개념 [2] 리액트 배치 개념 [3] 함수형 업데이트 , 제 생각에는 이 3가지 개념이 머릿속에서 혼재되어 이해를 못하고 있는 것 같습니다.다른 많은 블로그들의 설명을 봤는데 대체적으로,setCount(count &#43; 3); setCount(count &#43; 2);setCount(count &#43; 1);이 결과가 1씩 증가하는 이유를, 비동기때문이다. 배치이기 때문이다. 라고 말하는데 이해가 가지 않습니다.비동기라서 1개만 적용되는건가요? 아니면 배치이기 때문에 상태업데이트를 '퉁쳐서'? 하기 떄문에 마지막 하나만되는건가요..?아니면 배치이더라도 3개다 실행하지만, 키 값(?)이 같아서 결론적으로 마지막 하나만 실제로 적용되는건지아니면 비동기이자 배치이기 때문에 저런 현상이 발생하는건가요?? 개념이 혼재되어서 머리가 복잡해서 터질 지경입니다..명확한 설명이 머리속에서 정리안되서 힘든 것 같습니다.그리고 암튼 함수형 업데이트를 하면, 이전 상태의 값을 잘 업데이트가 가능하다고 해서 함수형 업데이트를 한다는 것은 어느정도 이해했습니다.그런데 위의 현상([케이스1])이 발생하는 이유가 뭘지 생각을 해보니, 지금 비동기, 배치 개념이랑 setState 함수의 원리를 제대로 이해 못하고 있는 것 같은데,어디서 구멍이 난 건지 이해할 수가 없네요ㅠ.. 살려주시면 감사하겠습니다.또한, 어느 블로그 설명들보면 이렇게 2가지도 있는것 같은데-배치작업을 위해서, 비동기적으로 동작한다.-비동기작업을 배치로 돌린다. 어느 표현이 맞는걸까요??긴 글을 읽어주셔서 매우 감사합니다. 좋은 하루 되세요. 감사합니다!!!!!

Clickin · Answer

비동기와 배치성 업데이트가 둘 다 적용되기 때문에 이런 현상이 발생하는거로 보입니다.리액트는 잘 다루지 않아서 퓨어 자바스크립트 관점에서 생각해보면각 setState는 개발자가 작성한 코드에서는 순번이 있지만 실제 동작시에는 렌더링 시점에 배치성으로 묶어서 동작할테니 순번이 없을겁니다.그리고 setState 가 count 변수 값은 렌더링 배치가 실행되는 시점 기준의 자바스크립트 렉시컬 환경에서 클로저로 캡처된 변수 값입니다.결국 setState(count &#43; 1) 과 setState(count &#43; 2) 에 전달되는 count는 동일한 값일 겁니다.반면 익명 함수로 전달될 때의 count 변수는 전달된 함수가 실행할 당시의 렉시컬 환경에서 캡처한 변수입니다.아무리 비동기라고 하더라도 결국 이벤트루프에서 순번으로 실행되는거고익명 함수가 실행되는 시점의 count 변수를 캡쳐하니 원하시는 동작이 가능한거겠죠잘못되었을 수 있으니 리액트 더 잘 아시는 분들이 보시고 검토해주세요

풍월상신(가니메디안) · Answer

비동기가 아니라,state 와 렌더링의 상관관계를 이해하셔야 합니다.setCount(count + 3); setCount(count + 2);위 두 라인의 코드는, setCount(count + 2);이 한 줄의 코드와 다름 없습니다. 렌더링 될 때, state 에 변화를 주는 가장 마지막 라인이 지배력을 갖게 되기 때문이에요.기대했던 대로 +5 가 나오는 결과를 위해서라면,setCount(prev => prev + 3); setCount(prev => prev + 2); 이렇게 펑션을 전달해야만 '이전' 상태에 '새로운' 상태가 덧씌워지는 것입니다.setState 함수는 비동기가 아니기 때문에, IDE 에서 await setCount(....) 해보면 무의미한 비동기 코드라는 주의 안내가 떠요.TLDR;setCount 는 비동기 함수가 아니다. 연속되는 연산을 하려면, 언제나 이전 상태를 참조하는 애로우 펑션을 인자로 넣어주는 것이 좋다.

킁킁탐정 · Answer

블로그 문서를 읽지 마시고 공식을 보셔야합니다. 공식 문서에 예제와 함께 자세하게 설명되 어있습니다.https://react-ko.dev/learn/queueing-a-series-of-state-updateshttps://react.dev/learn/queueing-a-series-of-state-updates간단하게 몇가지 정리해드리면 react에서 상태 변화로 일어나는 화면 변화는 &#34;비용&#34;입니다.매번 setCount()를 호출할때마다 변경을 즉시 반영한다면 호출 횟수만큼 &#34;비용&#34;이 생기게되며이는 app를 엄청나게 느리게 만드는 주 요인입니다.그래서 성능 향상을 위해 &#34;배치&#34; 라는걸 사용합니다.상태를 적용하는 setCount, setName, setAge 함수가 3개 있다고 가정합시다.다음의 순서로 상태를 변화시키고 즉시 반영한다면 6회 화면이 변화하게 됩니다.setCount, setCount, setCount, setName, setAge, setName하지만 &#34;배치&#34;를 이용하면 다음 처럼 3회 호출(한 번에 모두 적용: 배치)하게 됩니다.setCount, setAge, setName이로 인해 성능이 향상되고 app이 느려지는 문제를 어느정도 해결합니다.&#34;배치&#34;는 큐 방식이기 때문에 setCount를 호출하면 상태 변화 요청이 큐(대기열)에 등록되고큐는 다음번 화면을 갱신할때 한번에 (배치) 처리합니다.setCount(1 &#43; 3)은 단순하게 값을 4를 전달하는것이고setCount(count &#61;> count &#43; 7)는 updater 함수를 전달하게 됩니다.바꿔서 코드를 짜보면 다음 처럼 가능합니다.function updateCount(count) { return count &#43; 7 }setCount(updateCount)함수는 내부에 7의 값을 보존하고 기존 값을 더하기 때문에 단순하게 값만 넘기는 1 &#43; 3과는 다릅니다.이와 같은 차이점들을 잘 생각해보시면서 문서를 참조해보세요.

memoization · Answer

count가 0이라 하면,setCount(count &#43;3); // 0 &#43; 3 &#61; 3setCount(count &#61;> count &#43; 7); // 3 &#43; 7 &#61; 10setCount(count &#43; 1); // 0 &#43; 1 &#61; 1&#61;> 배치 처리(re-render를 묶어서 일괄 처리)를 하므로 마지막 1-------------------setCount(count &#43; 1); // 0 &#43; 1 &#61; 1setCount(count &#43;3); // 0 &#43; 3 &#61; 3setCount(count &#61;> count &#43; 7); // 3 &#43; 7 &#61; 10&#61;> 배치 처리(re-render를 묶어서 일괄 처리)를 하므로 마지막 10-------------------setCount(count &#43; 3); // 0&#43; 3setCount(count &#43; 1); // 0 &#43; 1setCount(count &#61;> count &#43; 7); // 1 &#43; 7 &#61; 8&#61;> 배치 처리(re-render를 묶어서 일괄 처리)를 하므로 마지막 8-------------------- 함수형 업데이트는 이전 업데이트가 적용된 최신 상태를 기반으로 다음 상태를 계산하기 때문에, 모든 업데이트가 순차적으로 적용됩니다.- React에서의 상태 업데이트는 &#34;비동기적&#34;으로 동작한다는 표현보다는, &#34;비동기적으로 보일 수 있다&#34;가 더 정확합니다.- React는 성능 최적화를 위해 여러 상태 업데이트를 &#34;배치(batch)&#34;하여 처리합니다. 이벤트 핸들러 내에서 발생한 여러 상태 업데이트는 하나의 업데이트로 합쳐져서 처리됩니다. 따라서, 여러 번의 setState 호출이 있더라도 실제 DOM에는 한 번만 반영되어 성능을 향상시킵니다.- &#34;배치작업을 위해서, 비동기적으로 동작한다&#34;보다는, &#34;성능 최적화를 위해 여러 상태 업데이트를 배치 처리한다&#34;가 더 적합한 표현입니다.- 비동기 작업과 배치 처리는 다소 다른 개념이며, React의 배치 처리는 비동기 작업이 아니라 여러 상태 업데이트를 효율적으로 관리하기 위한 메커니즘입니다.- 요약하자면, React의 상태 업데이트는 비동기적으로 보일 수 있으나, 실제로는 배치 처리되어 성능을 최적화합니다. 함수형 업데이트를 사용하면 이러한 배치 처리 과정에서도 예상한 대로 순차적인 상태 업데이트를 보장받을 수 있습니다.

갑분 리액트.. 질문입니다..ㅠㅠㅠ 살려주세요

4개의 답변

Q&A 목록