React가 상태관리 라이브러리는 아니지만, 상태관리의 주요원칙을 배운다면, 컴포넌트 간의 loose coupled, 구조적으로 아름다운 코드를 작성할 수 있다.
상태의 정의 : 변하는 데이터. 그러므로 UI상에 동적으로 표현될 데이터를 뜻함.
장바구니에서 상품선택여부/선택수량/장바구니에 담긴 물품/주문금액 및 배송비는 모두 변할 수 있으므로 상태다.
상태를 다룰 때는 반드시는 side effect를 고려해야 하는데
'함수 또는 컴포넌트의 입력 외에도 함수 결과에 영향을 미치는 요인' 을 말한다.(다시복습 ㄷㄷㄷ)
ex) 네트워크 요청(백엔드 API요청)
side effect 최대한 배제하고 컴포넌트 만들기
페이지 단위 개발이 아닌, 컴포넌트 단위 개발이기 때문에 우리는 하나의 기능을 온전히 수행하는 컴포넌트를 개발하고, 가짜 데이터가 들어와도 화면에 렌더링 될 수 있도록 해야한다.
상태는 크게 하나의 컴포넌트에서만 관리되는 상태1,
여러 컴포넌트에서 관리되는 상태2가 있다.(다른 컴포넌트와 props 관계가 있어야 함)
상품수량을 선택하는 것은 다른 요인에 영향을 받는 것이 아니므로 상태1.
장바구니에 물건이 담긴 경우, 해당 물건의 가격과 수량을 곱한 주문금액이 업데이트 되는 것은 주문금액 컴포넌트가 수량컴포넌트, 상품선택 컴포넌트에 영향을 받는 것이다. 따라서 상태2
전역 컴포넌트가 동일한 상태를 다룰 경우는 서로 같은 출처(같은 전역공간)에서 상태를 가져와야 한다. 왜냐하면 동기화(async)과정에서 오류가 발생할 수 있다.
UI상에서 의도한대로 데이터를 정확히 가져오기 위해 우린 데이터무결성(같은데이터는 하나의 출처에서만 온다.)를 지켜야한다.
스마트폰에서 언어 변경은 모든 기능에 적용해야 하기 때문에 전역에서 상태를 관리해야한다.
네이버에서 다크모드를 적용하면 검색엔진,기사창 등 모든 기능에 적용해야 하기 때문에 전역에서 상태를 관리해야한다.
그렇기 때문에 상태관리는 필수적이며 이를 쉽게 다룰 수 있는 라이브러리가 존재한다.
1. React context
2. Redux
3. MobX
라이브러리가 필요한 이유는
A컴포넌트에 상태가 있고, I컴포넌트가 해당 상태를 사용하고 싶다면 그 사이에 연결된 B,C,D,E,F,G,H 컴포넌트에 해당상태를 props해서 넘겨줘야 하는 비효율이 발생할 것이다. 이런 문제를 props drilling(프로퍼티 내려꽂기) 이라고 하는데 전역 상태 저장소가 있고 해당 저장소에 접근할 수 있다면 이러한 문제는 해결 될 것이다.
상태를 이용할 때 상태관리 툴이 반드시 필요한 건 아니다.
React 사고하기 공식문서를 보면 이해 가능하다.
