inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

react useState 실행순서에 대해서 질문드립니다.

480

ccct

작성한 질문수 2

0


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
        
        이렇게 메세지가 뜨는데 왜 순서가 달라지나요?


*/

react javascript

답변 1

0

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.

님의 질문에 관한 답변은 다음과 같습니다.

질문1에 대한 답변:
React의 useState와 관련된 업데이트는 비동기적으로 실행됩니다. 초기 클릭 시 setNumber를 체이닝하여 호출하게 되면, React는 성능 최적화를 위해 여러 상태 업데이트를 배치(Batch) 처리합니다. 첫 번째 클릭에서 ‘B’를 추가하지 않는 이유는, 첫 번째 setNumber 호출에서 반환한 값(‘AC’)만이 다음 상태 업데이트에 반영되고, 내부 setNumber 호출은 다음 렌더링 사이클에서 처리되기 때문입니다. 그래서 ‘B’가 바로 추가되지 않고, 두 번째 클릭 시점에서 ‘B’가 추가됩니다.

질문2에 대한 답변:
첫 번째 버튼 클릭 시 뜨는 메시지 순서는 React가 상태 업데이트를 배치 처리하는 방식 때문에, 상태 업데이트(setNumber)가 즉시 반영되지 않습니다. 이로 인해 alert가 호출될 때 number 상태는 아직 업데이트되지 않은 상태를 참조합니다. 다른 편, 두 번째 버튼 클릭부터는 첫 번째 setNumber 호출이 배치 처리되어 업데이트되고, 이후 alert가 실행될 때는 업데이트된 상태를 참조할 수 있게 되므로, number 상태가 변경된 후의 값을 보여주게 됩니다. 이러한 차이로 인해 메시지가 뜨는 순서가 달라집니다.

React의 상태 업데이트 메커니즘과 비동기 처리 로직의 이해를 돕기 위해서는, 공식 문서에서 제공하는 훅 관련 문서와 자바스크립트의 비동기 처리 방식에 대해 추가적으로 공부하는 것이 좋습니다.

Claude Code 자동 Update 활성화 방법은?

0

1

0

Vercel 배포 과정에서 오류가 발생합니다

0

8

1

Part2 수강 방법

0

19

1

20강 4분 30초 코드와 6분 30초 코드 관련 질문

0

17

0

리프레시토큰

0

22

1

영상에서 소개되는 코드와 강의 노트 코드가 달라요

0

27

1

/memory를 쓸 필요가 있나요? 그냥 md 들어가서 편집하면 안되나용?

0

52

2

오디오 문제

0

49

2

로그인 확인

0

63

3

서브에이전트 생성시 레퍼런스 및 스킬 생성

0

55

2

Git, Github 기초부터 실전까지 중 질문드립니다.

0

75

3

재생이 안됩니다.

0

54

1

TTL 산정 기준

0

43

1

클로드 설치 및 강의 미션 관련

0

61

1

/config Thinking mode 설정

0

53

2

안녕하세요, 강의 수강 중인 학생입니다.

0

50

2

rules 폴더나 CLAUDE.md 파일 관리 관련 질문

0

50

2

cursor 안에서 다운로드 안되는 게 많은데 대체가 필요할까요

0

66

2

업데이트로 인한 에이전트 생성 변경

0

75

2

starter kit 프로젝트에 prd 문서 만들기

0

77

2

명령어 여러줄 입력방법?

0

78

2

ctrl + 't' 단축어가 안먹어요

0

53

1

클로드코드 계획 보고 방법 알고싶어요.

0

71

2

실무 버전 출시는 언제?

0

65

1