|
React를 하면서 상태관리라는 말을 자주 접하게 된다.
이번 포스팅에서는 상태란 무엇이고 그 상태를 관리한다는 것은 무엇을 의미하는지, 그리고 React에서 상태관리를 하는 다양한 방법들을 직접 사용해보고 그 특징들을 비교해서 정리해보려고 한다.
우선 상태과 상태관리에 대한 개념부터 이해해보자.
상태(Status)?
간단히 말하자면 상태란 데이터로써 이해할 수 있는 것 같다.
객체지향 프로그래밍에서 프로그램의 기본 단위는 객체이고 객체간의 상호작용을 통해서 프로그램이 구현된다. 이때 각 객체들의 상호작용에 있어, 각 객체들이 가지고 있는 데이터가 전달되는데, 여기서 말하는 전달되는 데이터들을 상태로써 이해를 하면 좋을 것 같다.
상태관리(Status management)?
앞서 정리해 본 상태(Status)의 개념에서 비춰볼때 상태관리란 객체들간에 전달되는 데이터에 맞게 적절하게 UI를 설계하고 구현하는 것이 상태관리라고 볼 수 있을 것 같다.
예를들어 하나의 웹 어플리케이션의 페이지에는 로그인 상태, 사용자 이름, 콘텐츠 정보 등 다양한 데이터들이 존재한다고 가정한다면, 이러한 다양한 데이터들을 UI에 따라 적절하게 배치하고 표시하는 것이 상태관리가 아닐까 생각된다.
React를 사용해서 프론트엔드 개발을 할때 기본 단위는 재사용성 있는 컴포넌트인데, 이 컴포넌트 간의 상태 공유의 형태에 따라 local state와 global state를 적절하게 구분해서 설계해야 한다.
설계를 할때에는 상태를 일관적인 형태로 유지해서 무결성을 지켜야 한다. 즉, 공유되는 특정 데이터가 업데이트된다면 해당 데이터를 참조하고 있는 다른 화면에서도 업데이트된 데이터를 표시해야 된다는 말이다.
상태의 저장과 사용
앞서 상태를 관리한다는 것의 의미가 각 객체들간에 전달되는 데이터에 맞게 적절하게 UI를 설계하고 구현하는 것이라고 했는데, UI에서 전달되는 데이터에 맞게 설계를 하고 구현하기 위해서는 상태를 어떻게 저장하고 사용할 것인지에 대한 판단도 중요하다.
- 전역적으로 redux와 같은 store에 저장
- 웹 소켓으로 관리 (Backend와의 실시간 소통이 중요한 경우)
- Cookie나 LocalStorage에 저장 (브라우저가 종료된 후에도 상태유지)
이후의 내용부터는 각 상태관리 방법을 다양하게 사용해보면서 구체적으로 어떤 차이점과 특징이 있는지 정리를 할 예정이다. 단순히 익숙함에 의해 특정 상태관리 방법을 고수한다면 프로젝트에 따라 적절한 상태관리 방법을 사용할 수 없다고 생각한다.
구체적으로 어떤 상태관리 방법은 어떤 특징이 있으며 어떤 상황에서 사용하면 좋은지 구체적인 예시를 들어서 한 번 작성해보려고 한다.