-
카테고리
-
세부 분야
모바일 앱 개발
-
해결 여부
미해결
setState 함수의 동작에 대해 질문 있습니다(2)
22.09.15 23:30 작성 조회수 167
0
(아래 코드 참조하여)
질문 :
setCount에 함수를 인자로 넣었을 때는
setCount가 동기적으로 작동을 하는 이유가 무엇인지
이해가 잘 가지 않습니다. 동기적으로 작동을 한다기보다는
인자로 넣어진 함수의 count 인자가 setCount 실행 당시
그 직전 count 값을 잘 참조하고 있는 것 같은데 이렇게 실행되는
이유가 궁금합니다.
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);
}}/>
</>
)
}
답변을 작성해보세요.
0
김범준
지식공유자2022.09.16
안녕하세요,
setCount 함수의 파라미터로 함수를 전달했을 때 동작방식이 왜 그렇게 동작하는 것인지 묻는 것이라면,
"리액트에서 그렇게 동작하게 만들었습니다" 라고 답변 드릴 수 밖에 없습니다.
그리고 이런 상태 변경 함수 사용 방법을 함수형 업데이트라고 합니다.
앞의 질문과 이어지는데, setCount를 호출해도 상태변수 count는 계속 변화가 없고, 리렌더링 되었을 때 변경된 값을 확인할 수 있습니다.
setCount에 전달한 함수 파라미터 count에는 이전 상태 변수의 값이 들어오는데, 만약 위에서 상태 변수를 수정했다면 변경 예정인 상태 변수의 값이 들어옵니다.
useState아래에 console.log로 현재 count 상태 변수를 체크해보면 리렌더링 될 때 상태 변수가 변경되는 것을 확인할 수 있습니다.
사실 이 말도 조금 더 정확하게 얘기하면, 리렌더링 될 때 상태 변수가 변경되는 것이 아니라, "상태 변수가 변경되어서 리렌더링 되는 것입니다."
즐거운 하루 되세요
감사합니다.
김범준
지식공유자2022.09.16
추가로, 아직 강의 초반인데 useState가 조금 더 궁금하다면,
섹션6 2번째 강의에서 useState를 조금 더 자세하게 설명하니, 이 강의를 확인해 보시기 바랍니다.
답변 1