DOM에 컴포넌트가 연결되고 유지되는 동안에는
useState 상태는 최초의 초기화 이후에는 갱신만 된다
강의 대본
명백한 이야기지만
리액트에서 상태란 가장 중요한 개념입니다
이 상태라는 것은
컴포넌트를 다시 렌더링하고
화면에 표시되는 것들을 바꿉니다
따라서, 컴포넌트와 이 상태와의 상호작용은
리액트의 핵심적인 개념이죠
물론 이 둘 모두
리액트가 관리한다는 것에 주목할 필요가 있습니다
이러한 컴포넌트의 개념은 리액트 라이브러리에서 나왔으며
리액트는 이 컴포넌트와 연결된 상태도
함께 처리합니다
useState 후크를 이용하는 게 그 예입니다
이런 방식을 통해
컴포넌트와 상태간의 상호 작용을 처리합니다
말이 나와서 말인데
가장 일반적인 형태의 상태 관리는
useState 후크를 사용하는 것입니다
이를 이용하면, 새로운 상태를 만들어서
자동적으로 useState를 호출한 컴포넌트에
이를 연결할 수 있거든요
이런 종류의 연결도
리액트가 담당하는 역할입니다
useState를 호출하게 되면
리액트는 백그라운드에서 이를 관리하고
컴포넌트와 이를 묶어줄
새로운 상태 변수를 만들기 때문이죠
자, 지난 강의에서 말씀드렸듯이
useState를 호출했음에도
App 함수가 매번 다시 실행되는 것은 확실히 이상한 문제입니다
상태에 어떤 종류의 손실이 발생하거나
상태 초기화가 발생하는 것 같지는 않거든요
이유는 사실 간단합니다
useState는 리액트가 제공하며
방금 말했죠? 리액트는 상태를 관리하고
컴포넌트와의 연결을 관리한다고요
그리고 이 관리 프로세스의 일부로
리액트는 useState와
여기에 전달된 기본값에 대해서는
한 번만 고려되도록 처리합니다
컴포넌트가 처음 렌더링될 때
즉 App 컴포넌트가 최초 실행될 때죠
useState가 실행되면 리액트가 관리하는
새로운 상태 변수를
만들게 됩니다
그리고 난 뒤, 리액트는 이 변수가
어느 컴포넌트에 속하는지를 기억해둡니다
우리의 경우엔 App 컴포넌트군요
그리고 기본값을 사용해서
상태값을 초기화합니다
이후의 App 함수 호출, 즉
App 컴포넌트를 재평가하는 과정에서
useState가 호출되면
새로운 상태는 생성되지 않습니다
리액트는 여기에서
이 컴포넌트에 대한 상태가 이미 존재함을 깨닫고
필요할 경우 이 상태를 업데이트하게 됩니다
App 함수가 재실행되고
몇몇 상태는 변경될 수 있으니까요
따라서 리액트는
상태의 관리와 갱신만을 담당합니다
컴포넌트가 DOM에서 완전히 삭제되거나
하지 않는 이상
상태의 초기화는 이루어지지 않습니다
이 App 컴포넌트는 루트 컴포넌트이므로
이런 일은 아예 발생하지 않죠
하위 컴포넌트의 경우라면
조건에 따라 렌더링될 수 있습니다
예를 들어 컴포넌트가 삭제되었다면
그리고 다시 연결되었다면
새로운 상태가 초기화될 수 있습니다
하지만 DOM에 컴포넌트가 연결되고 유지되는 동안에는
상태는 최초의 초기화 이후에는 갱신만 됩니다
이는 아주 중요합니다
useReducer의 경우에도 마찬가지이고요
상태에 대해서 알아야 할 것은 이 외에도 또 있습니다
'온라인 강의 > React 완벽 가이드 [Udemy]' 카테고리의 다른 글
| 170. useMemo()로 최적화하기 (0) | 2023.06.27 |
|---|---|
| 169. State 스케줄링 및 일괄 처리 이해하기 (0) | 2023.06.27 |
| 167. 첫 번째 요약 (0) | 2023.06.27 |
| 166. useCallback() 및 해당 종속성 ** (0) | 2023.06.27 |
| 165. useCallback()으로 함수 재생성 방지하기 (0) | 2023.06.27 |