Achievement Goals

• 상태 관리 라이브러리가 왜 필요한지 이해할 수 있다..
• Redux (혹은 Flux Pattern)에서 사용하는 Action, Reducer 그리고 Store의 의미와 특징을 이해할 수 있다.
• Redux의 3가지 원칙이 무엇이며, 주요 개념과 어떻게 연결되는지 이해할 수 있다.
• Presentational 컴포넌트와 Container 컴포넌트의 개념을 이해할 수 있다.
• Redux hooks(useSelector, useDispatch)를 사용해 store 를 업데이트할 수 있다.

상태 관리 라이브러리가 필요한 이유

프론트엔드에서 상태란?
"UI에 동적으로 표현될 데이터"

UI에서 상태가 변경된다면 상태 뿐만 아니라 상태 변경으로 인해 영향을 받는곳도 존재(side Effect)

사이드 이펙트란?
"함수(또는컴포넌트)의 입력 외에도 함수의 결과에 영향을 미치는 요인"
대표적인 예는 네트워크 요청(백엔드 API 요청)

상태를 2가지로 나눠서 구분하자면 로컬과 전역 두가지로 구분 할 수 있다.

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

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

서로 다른 컴포넌트가 사용하는 상태의 종류가 다르면 꼭 전역 상태일 필요는 없고 출처(source)가 달라도 되지만
서로 다른 컴포넌트가 동일한 상태를 다룬다면, 이 출처는 오직 한 곳이어야함

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

데이터 무결성을 위해, 동일한 데이터는 항상 같은 곳에서 데이터를 가지고 오도록 해야함
Single source of truth(신뢰할 수 있는 단일 출처) 원칙은 프론트엔드 뿐만 아니라 다양한 곳에서 언급되는 원칙

라이트모드/ 다크모드 같이 모든페이지의 컴포넌트가 각각 적용되는 것처럼 테마설정같은 것을 관리를 해야하는 경우는 전역으로 관리를 해야함

상태 관리를 위한 각종 툴

• React Context
• Redux
• MobX

상태 관리 툴의 장점

• 전역 상태 저장소 제공
• Props drilling 이슈 해결
  (Props drilling은 상위 컴포넌트의 props를 하위의 하위의 하위 컴포넌트에서 사용할 때 같은 상황을 얘기)

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

---

오늘은 상태관리를 왜 해야하냐에 대한 것을 배우고 상태관리를 하지 않은 상태에서 약식으로 장바구니를 만들었다. 확실히 전역 변수를 지정해준다면 편할 것 같다.