React 상태관리

컴포넌트와 상태를 분리하여 전역에서 상태 관리를 해줄 수 있게 해주는 상태 관리 라이브러리인 Redux.

React 애플리케이션을 개발할 때 Redux를 사용하면 React 컴포넌트 간의 복잡한 데이터 흐름을 따라갈 필요가 없어진다. 특히 컴포넌트가 많아지고 애플리케이션의 구조가 고도화될수록 Redux를 활용한 상태 관리는 필요하다.

프론트엔드 개발에서의 상태관리

상태관리의 주요 언칙을 배우고 따라간다면, 컴포넌트 간 서로 느슨하게 결합된(loose coupled), 구조적으로 아름다운 코드를 작성할 수 있다.

• 상태란 무엇인가? 변하는 데이터

“UI에 동적으로 표현 될 데이터”

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

상태를 다룰 때 Side Effect 는 주요 고려대상이다.

함수(또는 컴포넌트) 의 입력 외에도 함수의 결과에 영향을 미치는 요인 ex) 네트워크 요청(백엔드 API 요청)

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

보통 컴포넌트 내에서만 영향을 끼지는 상태는 로컬 상태

다른 컴포넌트와 데이터를 공유하지 않는 폼(form) 데이터는 대부분 로컬 상태입니다. input box, select box 등과 같이 입력값을 받는 경우가 이에 해당

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

장바구니에 담긴 물품의 경우, 상품 선택 여부에 따라 총 주문 금액을 업데이트해야 합니다. 장바구니에 담긴 물품은 그 갯수 등을 다른 컴포넌트에 전달해 주어야 합니다.

아까 언급한 데이터 로딩 여부(로딩 중) 상태 역시, 앱 전반에 영향을 미칩니다.

서로 다른 컴포넌트가 사용하는 상태의 종류가 다르면, 꼭 전역 상태일 필요는 없습니다. 출처(source)가 달라도 됩니다.

그러나, 서로 다른 컴포넌트가 동일한 상태를 다룬다면, 이 출처는 오직 한 곳이어야 합니다. 만일 사본이 있을 경우, 두 데이터는 서로 동기화(sync)하는 과정이 필요한데, 이는 문제를 어렵게 만듭니다. 한 곳에서만 상태를 저장하고 접근하세요. 여기서 '하나의 출처'는 다른 말로 이야기하면 '전역 공간'이라고 볼 수 있습니다.

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

데이터무결성이란?

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

무결성을 위한 방법론

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

동일한 데이터는 항상 같은 곳에서 데이터를 가지고 온다.

전역으로 상태를 관리해야 하는 경우

• 네이버를 비롯한 여러 사이트에서 다크모드 기능이 적용되야 하기 때문에 이런 태마 설정을 전역에서 이뤄져야한다.
• 국제화(Globalization) 설정도 사용자가 사용하는 브라우저나, 운영체제가 특정 언어를 사용하고 있음을 나타내야해서 전역으로 관리.

상태관리를 위한 각종 툴

• React Context
• Redux
• MobX

상태관리 툴은 어떤 문제를 해결해주는가?

• 전역 상태를 위한 저장소 제공
• props drilling(프로퍼티 내려꽂기) 이슈 문제를 해결

상태관리 툴이 반드시 필요한 것은 아니다.

대부분의 경우 React 사고하기를 통해 해결 할 수 있다.

React로 사고하기 - React