[React] 상태 관리

Section3 Unit4 개요

Redux?

• 컴포넌트와 상태를 분리하여 전역에서 효율적으로 상태 관리를 해줄 수 있게 해주는 상태 관리 라이브러리
• Redux를 사용하면 React 애플리케이션을 개발할 때 컴포넌트 간의 복잡한 데이터 흐름을 따라갈 필요가 없어집니다.
• 컴포넌트가 많아지고 앱의 구조가 고도화될수록 Redux를 활용한 상태 관리가 필요합니다.

1. 상태 관리

1-1. 전역 상태 관리

1-1.1) 프론트엔드 개발에서 상태의 중요성

 

-  상태? 

• 변하는 데이터
• UI에 동적으로 표현되는 데이터

- UI에서 상태 찾기 연습: 장바구니에서 찾을 수 있는 상태?

• 해당 물품을 장바구니에 담아 추가할 수 있습니다.
• 상단에 [일반구매/정기배송]중 현재 선택된 탭이 무엇인지 나타낼 수 있습니다.
• 상품 선택 여부에 따라 주문 금액이나 배송비가 달라집니다.
• 상품 수량

 

1-1.2) 프론트엔드 개발에서의 Side Effect

- Side Effect?

• 상태를 다룰 때에 주요 고려 대상
• 함수 또는 컴포넌트의 입력 외에도 함수의 결과에 영향을 미치는 요인 -> 네트워크 요청(API 요청)

- Side Effectf를 최대한 배제하고 컴포넌트 만들기

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

그림과 같이 <CartItem>이라는 컴포넌트를 만든다면, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fetch와 같은 API 요청이 없이도 이 컴포넌트는 작동되어야 합니다. 어떤 데이터가 들어오는지 상관하지 않고, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;설사 데이터가 가짜 데이터라 할지라도 컴포넌트는 표현(presentation) 그 자체에 집중!

 

- 불가피한 Side Effect와 상태

그림과 같이 "로딩 중"을 나타낼 것인지 아닌지 여부는 데이터 전송 여부에 따라 달려 있습니다. 앱을 만들고, UI를 구성할 때에는 항상 이러한 로딩 중 상태도 고려하여야 합니다.

- 상태의 적절한 위치는?

React로 사고하기

React로 사고하기 – React

 

- 상태의 두가지 구분

로컬 상태는 특정 컴포넌트 안에서만 관리되는 상태이며, 전역 상태는 프로덕트 전체 혹은 여러 가지 컴포넌트가 동시에 관리하는 상태를 말합니다.

 

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

보통 컴포넌트 내에서만 영향을 끼치는 상태는 로컬 상태입니다. <CartItem> 컴포넌트의 경우, '선택한 수량'이 되겠습니다. 원래 가격에 상태를 곱해 컴포넌트 내에 표시되는 주문 금액을 업데이트하면 됩니다. 다른 컴포넌트와 데이터를 공유하지 않는 폼(form) 데이터는 대부분 로컬 상태입니다. input box, select box 등과 같이 입력값을 받는 경우가 이에 해당합니다.

- 전역 상태: 프로덕트 전체 혹은 여러 컴포넌트에서 관리되는 상태

• 다른 컴포넌트와 상태를 공유하고 영향을 끼치는 상태
• 장바구니에 담긴 물품의 경우, 상품 선택 여부에 따라 총 주문 금액을 업데이트해야 하는데, 장바구니에 담긴 물품은 그 갯수 등을 다른 컴포넌트에 전달해 주어야 합니다.
• 데이터 로딩 여부(로딩 중) 상태 역시, 앱 전반에 영향을 미칩니다.
• 서로 다른 컴포넌트가 사용하는 상태의 종류가 다르면, 꼭 전역 상태일 필요는 없습니다.
• 서로 다른 컴포넌트가 동일한 상태를 다룬다면, 이 출처는 오직 한 곳이어야 합니다 -> 한 곳에서만 상태를 저장하고 접근 해야 합니다.
• '하나의 출처'는 다른 말로 이야기하면 '전역 공간'이라고 볼 수 있습니다.

 

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

• 데이터 무결성? -> 데이터의 정확성을 보장하기 위해 데이터의 변경이나 수정 시 제한을 두어 안정성을 저해하는 요소를 막고 데이터 상태를 항상 옳게 유지하는 것

- 전역 상태 관리 Case study 하는 경우?

• 다크 모드 기능
• 국제화(Globalization) 설정
• 히스토리 기능과 Undo/Redo

- 상태 관리를 위한 툴 종류

• React Context
• Redux
• MobX

- 상태 관리 툴의 역할

• 전역 상태 저장소 제공
• Props drillling 이슈 해결