상태관리

#상태관리를 보다 더 효율적으로 할수있는방법
컴포넌트와 상태를 분리하여 전역에서 상태관리를 해줄수있게 해주는 상태 관리 라이브러리인 redux.

#redux를 사용하면 react컴포넌트 간의 복잡한 데이터 흐름을 따라갈 필요가 없어진다.
컴포넌트가 많아지고 애플리케이션의 구조가 고도화될수록 리덕스를 활용한 상태관리는 빛을 발합니다.

 

#상태: 변하는 데이터
UI, 프론트엔드 개발에서는 "동적으로 표현되는 데이터"

#상태를 다룰때에 side effect는 주요 고려 대상이다.
side effect: 함수의 입력 외에도 함수의 결과에 영향을 미치는 요인
대표적으로 네트워크 요청, api 호출
---------------------------------------------
#상태의 두가지 구분
로컬상태: 특정 컴포넌트 안에서만 관리되는 상태
전역상태: 프로덕트 전체 혹은 여러가지 컴포넌트가 동시에 관리하는 상태.
------------------------------------------------
#로컬상태
-보통 컴포넌트 태에서만 영향을 끼치는 상태
-다른 컴포넌트와 데이터를 공유하지 않는 폼(form)데이터는 대부분 로컬상태이다.
input box, select box 등과 같이 입력값을 받는 경우가 이에 해당된다.

#전역상태
-다른 컴포넌트와 상태를 공유하고 영향을 끼치는 상태
-예: 장바구니에 담긴 물품
-데이터 로딩 여부(로딩중) 상태도 앱 전반에 영향을 미친다.
-서로 다른 컴포넌트가 동일한 상태를 다룬다면, 이 출처는 오직 한곳이어야한다. 여기서의 출처가 전역공간이다.
서로 다른 컴포넌트가 사용하는 상태의 종류가 다르면, 꼭 전역상태일 필요는 없다. 출처가 달라도 된다.

#무결성을 위한 방법론.
Single source of truth(신뢰할수있는 단일출처) 원칙은 다양한 곳에서 언급되는 원칙이다. 
데이터 무결성을 위해, 동일한 데이터는 항상 같은 곳에서 데이터를 가지고 오도록 하자.


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

#전역상태관리 예시
-라이트모드, 다크모드
-언어설정
-포토샵에서 undo/redo를 위한 history기능

#상태관리를 위한 각종 툴
-React Context
-Redux
-Mobx

#상태관리툴이 해결해주는 문제
-전역상태 저장소를 제공한다.
-Props drilling 문제를 해결한다.

---

#props drilling
-상위 컴포넌트의 state를 props를 통해 전달하고자 하는 컴포넌트로 전달하기 위해 그 사이는 props를 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 데이터를 전달하는 현상을 의미한다.

-컴포넌트A의 state를 컴포넌트D로 전달하기 위해선 사이에 있는 컴포넌트 B,C를 거쳐야한다.

#문제점
-props의 전달횟수가 5회 이내로 많지 않다면 괜찮지만, 규모가 커지고 구조가 복잡해지면서 전달과정이 늘어난다면 문제가 발생한다.
-코드의 가독성이 나빠지게된다.
-코드의 유지보수 힘들어진다.
-state변경시 props 전달 과정에서 불필요하게 관여된 컴포넌트들 또한 리렌더링이 발생한다. 따라서, 웹성능에 악영향을 줄수있다.

#해결방법
컴포넌트와 관련있는 state는 될수있으면 가까이 유지하는 방법과 상태관리 라이브러리를 사용하는 방법이 있다.
상태관리라이브러리를 사용하게되면 전역으로 관리하는 저장소에서 직접 state를 꺼내쓸수 있기때문에 props drilling을 방지하기에 매우 효과적이다.
상태관리 라이브러리는 다양하다. (Redux, Context api, Mobx, Recoil 등)