인프런 커뮤니티 질문&답변

잇택잇님의 프로필 이미지
잇택잇

작성한 질문수

[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

8.2) UI 구현하기

리렌더링 동작에 따른 상태의 변화

해결된 질문

작성

·

374

0

안녕하세요? 질문 드립니다.

 

state가 바뀔 때 마다 해당 컴포넌트에 대해 리렌더링이 발생한다고 하셨습니다. 리렌더링은 해당 컴포넌트를 반환하는 함수의 재호출로 인한 결과일텐데 어떻게 상태값이 다시 새로 초기화되지 않고 변화한 값을 들고 있는지 궁금합니다.

 

임의의 state에 대해 useState()로 인한 초기화가 매번 새롭게 호출될텐데 해당 state는 초기화값을 계속 할당받는 것이 아닌 변화한 값을 인식하고 있습니다. 내부의 원리가 궁금합니다.

답변 1

1

이정환 Winterlood님의 프로필 이미지
이정환 Winterlood
지식공유자

안녕하세요 이정환입니다.
엄청나게 예리한 질문을 주셨네요 😎

useState가 반환하는 STate의 값이 계속해서 유지되는 이유는 바로 useState는 클로저를 이용하기 때문입니다.

클로저란 자바스크립트의 비교적 심화적인 개념인데요 이를 이용하면 이미 호출이 완료된 함수를 다시 호출하더라도 이전의 상태를 유지하게 하는 등의 동작을 가능케 만들 수 있습니다.

다음의 두 아티클을 읽어보시면 꽤 도움이 될 것 같습니다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures

https://seokzin.tistory.com/entry/React-useState%EC%9D%98-%EB%8F%99%EC%9E%91-%EC%9B%90%EB%A6%AC%EC%99%80-%ED%81%B4%EB%A1%9C%EC%A0%80

잇택잇님의 프로필 이미지
잇택잇

작성한 질문수

질문하기