2022-02-17 프론트엔드 개발에서의 상태 관리

intro

 

React가 상태 관리를 위한 라이브러리는 아니다.

 

그러나 상태 관리의 주요 원칙을 배우고 이를 따라간다면, 컴포넌트 간 서로 느슨하게 결합된

구조적으로 아름다운 코드를 작성할 수 있음.

 

 

 

- 상태란?  UI에 동적으로 표현될 데이터 

 

 

프론트엔드 개발에서의 Side Effect

 

Side Effect란? 함수(또른 컴포넌트)의 읩력 외에도 함수의 결과에 영향을 미치는 요인 ex) 네트워크 요청 API 호출

 

React의 주요 개발 원칙 중 하나는 UI를 페이지 단위가 아닌 컴포넌트 단위로 보는 것이다.

 

만약 그림과 같이 <Cartitem>이라는 컴포넌트를 만든다면, fetch와 같은 API 요청이 없이도

 

이 컴포넌트는 작동되어야 한다.

 

어떤 데이터가 들어오는지 상관하지 않고 설사 데이터가 가짜 데이터라 할지라도 컴포넌트는  표현 그 자체에 집중해야 한다.

 

 

 

 

불가피한 Side Effect와 상태

 

하지만, 앱을 만들다 보면 분명 API 호출도 해야 하고, side effect는 불가피하게 생기기 마련.

 

이러한 side effect에 의존적인 상태도 있을 수 있음.

 

예를 들어 그림과 같이 "로딩 중"을 나타낼 것인지 아닌지 여부는 데이터 전송 여부에 따라 달려 있음.

 

앱을 만들고, UI를 구성할 때에는 항상 이러한 로딩 중 상태도 고려해야 함.

 

 

상태의 적절한 위치

 

상태는 로컬과 전역으로 구분될 수 있다. (반드시는 아니다)

 

로컬 상태는 특정 컴포넌트 안에서만 관리되는 상태이며

 

전역 상태는 프로덕트 전체 혹은 여러 가지 컴포넌트가 동시에 관리하는 상태를 말함.

 

 

로컬상태

 

보통 컴포넌트 내에서만 영향을 끼치는 상태를 로컬 상태라고 함.

 

아래 그림에서는 '선택한 수량' 이 됨.

 

다른 컴포넌트와 데이터를 공유하지 않는 폼(form) 데이터는 대부분 로컬 상태입. input box, select box 등

 

 

 

전역 상태

 

전역 상태는 다른 컴포넌트와 상태를 공유하고 영향을 끼치는 상태임.

 

장바구니에 담긴 물품의 경우, 상품 선택 여부에 따라 총 주문 금액을 업데이트해야 함.

 

장바구니에 담긴 물품은 그 갯수 등을 다른 텀포넌트에 전달해 주어야 함.

 

전에서 언급한 데이터 로딩 여부 상태 역시, 앱 전반에 영향을 미침.

 

 

- JS처음 배울때 전역 변수의 남용은 좋지 않다고 배움. 

 

리액트에서도 서로 다른 컴포넌트가 사용하는 상태의 종류가 다르면,  전역 상태일 필요는 없음. 출처가 달라도 됨

 

그러나, 서로 다른 컴포넌트가 동일한 상태를 다룬다면, 이 출처는 오직 한 곳이어야 함.

 

만일 사본이 있다면, 두 데이터는 서로 동기화하는 과정이 필요한데, 이거는 너무 복잡해짐.

 

한 곳에서만 상태를 저장하고 접근하자.

 

여기서 하나의 출처는 다른 말로 이야기하면 '전역 공간'임!

전역 상태에서의 데이터 무결성

 

- 데이터 무결성이란?

 

데이터의 정확성을 보장하기 위해 데이터의 변경이나 수정 시 제한을 두어

 

안정성을 저해하는 요소를 막고 데이터 상태들을 항상 올헤 유지하는 것

 

데이터 무결성을 위해서는 동일한 데이터는 항상 같은 곳에서 데이터를 가지고 온다!

 

Single source of truth(신뢰할 수 있는 단일 출처)

 

 

전역 상태 관리

 

그렇다면 전역으로 상태를 관리해야 하는 경우가 있는 경우는?

 

- 다크 모드 

 

- 언어 설정(국제화 설정)

- Undo/Redo를 위한 History 기능

 

 

상태 관리를 위한 각종 툴

 

• React Context
• Redux
• MobX

1. 이들은 보통 전여 상태 저장소를 제공해준다!

 

2. props drilling 이슈를 해결해준다

 

예를 들어 A라는 컴포넌트에 상태가 있고, I라는 컴포넌트가 해당 상태를 사용한다고 하면, 중간에 C G는 상태가 필요하지 않음에도 props를 만들어야했음 . 이를 props drilling 문제라고 함.

 

따라서 전역 상태 저장소가 있으면 좋음!