상태 관리란

2023-02-20 929 words 2 minutes

Contents

클라이언트 개발을 하다 보면 상태 관리, 혹은 상태 관리 툴들에 대해 언급 되는 경우가 많이 있었다.

상태관리란 무엇이고, 왜 해야 할까?

상태란

상태는 어플리케이션의 부분으로, 고객의 리스트와, 데이터베이스로부터 받은 상품 목록들이 상태의 타입에 속한다.

비슷한 맥락에서 브라우저에서 일어나는 이벤트들과 div의 색상과 모양 또한 상태이다.

이 상태는

상태 관리는 ‘어플리케이션의 상태를 모든 컴포넌트에 걸쳐 동기화 할 수 있는’ 디자인 패턴의 구현체이다.

이 디자인 패턴의 적용은 서비스의 구현과 데이터베이스로부터 오는 데이터 핸들링을 아주 쉽게 할 수 있다.

전체 어플리케이션의 상태가 단일 포인트로 통일화되므로, 특정 상태나 서로 다른 곳의 데이터를 뒤질 필요가 없다.
데이터를 받기 위해 BE로 보내는 HTTP 요청의 수를 줄일 수 있다.
데이터가 변경되거나 신규 데이터가 추가되었을 때에만 서버에 요청을 보낼 수 있다.
데이터베이스를 업데이트하기 위해 서버에 데이터를 보내는 행위와, 전체 어플리케이션의 상태를 업데이트하는 것 (RxJS등의 비동기 라이브러리을 사용해서) 을 둘 다 할 수 있다.
상택 관리는 코드를 중앙화하기 때문에 유지보수하기 쉬워진다. 또한 코드의 크기를 줄이고 가독성 좋게 만들어서 코드의 품질을 높이는데 일조할 수 있다.

상태 관리를 적용하는 것은 쉽지 않다. 정말 간단한 어플리케이션이라면 굳이 상태 관리를 하지 않아도 된다.

어플리케이션이 무수한 수의 컴포넌트를 가지고 있고, BE에 데이터를 받기 위해 많은 수의 요청을 보내는 경우
1. 이 경우 사용자 경험과 어플리케이션의 속도를 현저히 증가시키위 해 상태 관리를 구현해야 한다.
불필요한 데이터가 전체 어플리케이션에 걸쳐서 사용되고 있다면 - 예를 들어 고객 목록이 주문서 생성과 매출 보고서 생성 과정에서 둘 다 사용되고 있다면 고객 정보를 다시 데이터베이스에서 가져올 필요가 없다.

NgRx라는 라이브러리를 많이 사용한다.

다른 프레임워크들에 상태 관리 라이브러리들이 들어서기 시작한 것은 리액트의 Redux 패턴이 적용되었을 때부터이다.

Redux는 리액트 개발에서 상태 관리를 구현하는 라이브러리이다.

Vuex라는 라이브러리를 많이 사용한다.