react useState 실행순서에 대해서 질문드립니다.
465
작성한 질문수 2
import React,{useState} from 'react';
function Exptest (){
const [number, setNumber] = useState('A');
const checkNumber =() =>{
alert("첫번째 "+number);
setNumber(function (prevnumber){
alert(prevnumber+"/3번/"+number);
setNumber((prevnumber)=>{
alert(prevnumber+"/4번/"+number);
return prevnumber+'B';
});
return prevnumber+'C';
});
alert("두번째"+number);
};
return (
<>
<button onClick = {checkNumber}> {number} </button>
</>
);
};
export default Exptest;
/*
이런식으로 안쓰는건 알지만 실행순서에 대해서 공부하다 이것저것 해보다가 이해가 안가서 질문드립니다.
질문1.
처음 버튼 클릭 시 number='A' -> number = 'AC' 이렇게 업데이트된다.
그리고 두번 째 실행 시 결과는 number = 'ACCB' 가 되는데 왜 처음엔 B를 추가하지 않나요?
질문2.
alert 메세지가 뜨는 순서를 보면 처음 버튼 클릭 시
첫번째 A -> A/3번/A -> A/4번/A -> 두번째 A
그리고 두번 째 버튼 클릭 부터는
첫번째 AC -> 두번째 AC -> AC/3번/AC -> ACC/4번/AC
이렇게 메세지가 뜨는데 왜 순서가 달라지나요?
*/
답변 1
0
안녕하세요, 인프런 AI 인턴입니다.
님의 질문에 관한 답변은 다음과 같습니다.
질문1에 대한 답변:
React의 useState와 관련된 업데이트는 비동기적으로 실행됩니다. 초기 클릭 시 setNumber를 체이닝하여 호출하게 되면, React는 성능 최적화를 위해 여러 상태 업데이트를 배치(Batch) 처리합니다. 첫 번째 클릭에서 ‘B’를 추가하지 않는 이유는, 첫 번째 setNumber 호출에서 반환한 값(‘AC’)만이 다음 상태 업데이트에 반영되고, 내부 setNumber 호출은 다음 렌더링 사이클에서 처리되기 때문입니다. 그래서 ‘B’가 바로 추가되지 않고, 두 번째 클릭 시점에서 ‘B’가 추가됩니다.
질문2에 대한 답변:
첫 번째 버튼 클릭 시 뜨는 메시지 순서는 React가 상태 업데이트를 배치 처리하는 방식 때문에, 상태 업데이트(setNumber)가 즉시 반영되지 않습니다. 이로 인해 alert가 호출될 때 number 상태는 아직 업데이트되지 않은 상태를 참조합니다. 다른 편, 두 번째 버튼 클릭부터는 첫 번째 setNumber 호출이 배치 처리되어 업데이트되고, 이후 alert가 실행될 때는 업데이트된 상태를 참조할 수 있게 되므로, number 상태가 변경된 후의 값을 보여주게 됩니다. 이러한 차이로 인해 메시지가 뜨는 순서가 달라집니다.
React의 상태 업데이트 메커니즘과 비동기 처리 로직의 이해를 돕기 위해서는, 공식 문서에서 제공하는 훅 관련 문서와 자바스크립트의 비동기 처리 방식에 대해 추가적으로 공부하는 것이 좋습니다.
공부방향에 대한 조언
0
5
1
styled-components
0
3
1
터미널 기본명령어 강의교안의 링크가 연결되지 않습니다.
0
13
2
모듈형 규칙: .claude/rules - 메모리에 설정 내용 미반영
0
12
2
커서에서 파일추가 Side bar 추가가 어려워요
0
15
1
섹션 8 git 및 github사용 관련
0
16
2
바이브코딩으로서의 개발공부
0
20
2
github 사용 관련 질문
0
20
2
클로드 코드 명령어 입력란이 맨 밑에 있어요
0
10
2
prd생성 관련 소스..
0
16
2
강의가 누락된것 같습니다.
0
27
2
토큰오류 아시나요?
0
26
2
유튜브 시연 영상 추가 기능 강의 업로드 계획
0
12
1
(VS코드) install command 아무리 해도 안나옵니다
0
30
2
강의 수강 후 포트폴리오 준비 방향에 대해 조언 부탁드립니다.
2
30
1
@/styles/globals.css'
0
24
2
VS Code의 Command pallet에서 'install command'해도 'code' command가 안보입니다.
0
37
2
용어 발음법이 계속 바뀌는 것 같은데 이런 부분들 개선이 가능할까요...?
0
36
1
파일 디렉토리 구조가 다르네요
0
32
2
클로드 초기설정
0
32
2
슬슬 따라하기가 힘들어진다.
0
74
2
counter01.html은 어디있을까요?
1
16
1
[문의] 섹션 7 미션 진행 중...
0
30
2
기본 브랜치의 이름이 master에요.
0
43
2





