리액트의 useState() 훅 렌더링 방식

❓컴포넌트 함수가 재실행되면 useState()도 계속 재실행되는 거 아닌가?

❓그럼 매번 상태를 초기화하고 다시 렌더링 하는 건가?

 

❗️NO!!!

React는 처음 useState가 호출될 때 해당 상태 변수를 생성하고 기본값을 사용하여 초기화를 딱 한 번 한다. (해당 변수와 연결된 값이 메모리에 저장된다.)

이때의 초기화는 컴포넌트가 처음 렌더링 될 때만 발생하며, 그 이후로는 해당 상태 변수가 이미 생성되었다면 초기화를 하지 않는다.

 

이후 렌더링에서는 이전에 생성된 상태 변수를 재사용하고, 값이 변경되어도 새로운 변수를 생성하는 것이 아니라 이전 변수를 업데이트하게 된다.

 

상태 초기화는 컴포넌트가 DOM에서 완전히 삭제되지 않는 한 (unmount 되지 않는 한) 계속 유지된다. 컴포넌트가 유지되는 동안에는 React가 상태를 초기화하는 것이 아니라 상태를 관리하고 업데이트하는 역할을 수행한다.