• 카테고리

    질문 & 답변
  • 세부 분야

    모바일 앱 개발

  • 해결 여부

    미해결

setState 함수의 동작에 대해 질문있습니다(3)

22.09.15 23:40 작성 조회수 130

0

아래 코드를 실행하고 찍힌 로그를 확인하면 다음과 같습니다.

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

          console.log('set 카운트1 전 count : ' + count);
          setCount(count =>   {
            console.log('count1 : ' + count);
            return count + 1
          });
          console.log('set 카운트1 후 count : ' + count);
          setCount(count =>   {
            console.log('count2 : ' + count);
            return count + 1
          });
          console.log('set 카운트2 후 count : ' + count);



        }}/>
      </>
  )

}

set 카운트1 전 count : 0 count1 : 0 set 카운트1 후 count : 0 set 카운트2 후 count : 0 count2 : 1 set 카운트1 전 count : 2 set 카운트1 후 count : 2 set 카운트2 후 count : 2 count1 : 2 count2 : 3 set 카운트1 전 count : 4 set 카운트1 후 count : 4 set 카운트2 후 count : 4 count1 : 4 count2 : 5

질문 :

count1 : 0 로그가 찍힌걸로 보아 첫번째 setCount가

실행이 되었으므로 count가 1로 바뀌어야하고

그 이후에 실행된 set 카운트1 후 로그는 count가 1이 되어야 맞을 것 같은데 그렇게 찍히지가 않았습니다.

그 이유가 궁금합니다.

 

답변 1

답변을 작성해보세요.

0

안녕하세요,

 

이전 질문에 대한 답변으로 충분히 해결 되었으리라 생각합니다.

다시 한 번 정리해드리면,

 

  • 상태 변경 함수는 비동기적으로 동작합니다. 그래서 함수를 호출했다 하더라도 상태 변수에 바로 반영되지 않습니다.

  • 상태가 변경되면 리렌더링 됩니다. 그래서 리렌더링 되기 전에는 변경된 상태를 확인할 수 없습니다.

  • 비동기적으로 동작하는 상태 변경 함수의 문제를 해결하는 방법은, 파라미터로 함수를 전달하는 함수형 업데이트 입니다.

  • 전달된 함수의 파라미터로는 이전 상태 변수의 값이 전달되며, 만약 상태 변경 함수를 통해 변경을 한적이 있다면, 아직 반영되지 않았더라도 변경 예정인 값이 전달됩니다.

 

추가로, 컴포넌트 최상단에 console.log를 작성해서 리렌더링과 그때의 상태를 확인하면 조금 더 편하게 변경되는 상태를 확인할 수 있습니다.

그리고, 함수형 업데이트에 작성한 코드를 count로 하지 않고 prev로 하면 조금 덜 헷갈리게 확인할 수 있습니다.

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

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