리액트는 실제 DOM 변경 전에 내부적으로 가상 DOM이라는 개념이 사용됩니다.
가상 DOM에서 미리 변화를 적용해 본 뒤 실제 DOM과 비교해서 다른 부분만 업데이트해줍니다.
그렇기 때문에 직접적으로 DOM을 조작하지 않고 HTML과 비슷한 JSX 문법을 통해 View를 정의하되
특정 상태값에 따라 컴포넌트를 어떤식으로 렌더링할지 선언하는 방식입니다.
상태관리를 하는 이유는
첫번째로
상태 관리를 통해 앱의 동작을 예측 가능하게 만들 수 있습니다.
예를 들어 버튼을 누르면 팝업이 뜨고, 그 팝업에서 확인을 누르면 데이터가 저장되는 등
상태를 잘 관리하면 이런 동작들이 일관되게 작동합니다.
두 번째는 컴포넌트 간 상태 공유입니다.
여러 컴포넌트에서 같은 상태를 사용해야 할 때, 이 상태를 효율적으로 관리 해 주어야 합니다.
A, B, C 세 개의 컴포넌트가 동일한 데이터를 참조하거나 수정할 때 상태관리가 없으면 A에서 변경한 값을 B, C가 모르게 됩니다.
상태 관리를 통해 이 상태를 "중앙에서" 관리하게 되면, A 컴포넌트에서 상태를 변경했을 때 그 변경이 B와 C에도 자동으로 반영되게 할 수 있습니다.
세 번째는 성능 최적화 입니다.
상태를 잘 관리하면 불필요한 렌더링을 줄일 수 있어 성능에 긍정적인 영향을 미치게 됩니다.
네 번째 가독성과 유지보수입니다.
상태관리 방식이 일관되면 코드 가독성도 좋아지고 나중에 다른 사람이 코드를 봤을 때 이해하기 쉬워집니다.
평소 State 관리는
간단한 상태 로직에서 useState를 이용합니다. 상위 컴포넌트에서 상태를 관리하고 하위 컴포넌트에세 props로 상태를 전달 해 줍니다.
만약 상태 공유가 복잡하거나 여러 컴포넌트에서 상태를 공유해야 할 경우 전역 상태 관리 라이브러리를 사용합니다. 라이브러리는 Redux, Recoil을 사용 해 보았습니다.
