• 카테고리

    질문 & 답변
  • 세부 분야

    모바일 앱 개발

  • 해결 여부

    미해결

setState의 동작에 대해 질문 있습니다(1)

22.09.15 23:22 작성 조회수 188

0

첫번째 질문:

아래와 같은 상황에서

+버튼을 한번 클릭 했을 때

count에는 1이 저장되게 됩니다. 그렇다는 것은

두 개의 setCount 함수 중 맨 마지막 setCount만

실행된다는 의미로 받아들이면 될까요?

아니면 두 setCount 함수가 실행되지만

받고있는 인자 count는 두 함수 모두 0을 받는다고 생각해야할까요?

const Counter = () => {
  const [count, setCount] = useState(0);
  return (
      <>
        <StyledText>count : {count}</StyledText>
        <Button title='+' onPress={() => {
        
          console.log('count 1 : ' + count);
          setCount(count + 1);
          console.log('count 2 : ' + count);
          setCount(count + 1);
          console.log('count 3 : ' + count);


        }}/>
      </>
  )

}

답변 1

답변을 작성해보세요.

0

안녕하세요,

 

마지막것만 실행되는 것이 아니라,

count가 0인 상태로 +1이 되어 세 함수 모두 count를 1로 변경하는 것입니다.

상태변수를 변경하는 함수는 비동기로 동작해서 위의 코드는 다음과 같이 동작합니다.

 

1) 첫 번째 setCount를 부를 때는 count가 0. 그래서 count + 1 은 1이 됩니다.

2) 두 번째 setCount를 부를 때는 아직 1)에서 실행한 함수가 반영되기 전이라 count는 0. 그래서 두 번째 setCount도 count + 1은 1이 됩니다.

3) 세 번째는 두 번쨰 setCount와 같은 이유로 count + 1은 1이 됩니다.

 

세 함수 모두 실행됩니다. 사용하는 count 상태 변수의 값이 계속 0인 것입니다.

 

즐거운 하루 되세요

감사합니다.

추가로, 아직 강의 초반인데 useState가 조금 더 궁금하다면,

섹션6 2번째 강의에서 useState를 조금 더 자세하게 설명하니, 이 강의를 확인해 보시기 바랍니다.