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

-상태? : UI에 동적으로 표현될 데이터!
변하는 데이터,
프론트 개발에서는 동적으로 표현되는데이터
1. 전역 상태를 위한 저장소를 제공
2. props dariiing(프로퍼티 내려꽂기) 해결
3. 상태가 어디에 위치해야 하는지

Redux는 React 없이도 사용할 수 있는, 상태 관련 라이브러리입니다.
: 자바스크립트 내에서 예측가능한 상태관리를 해주는
컨테이너!

-상태의 두가지 구분
: 로컬 - 특정 컴포넌트 안에서만 관리되는 상태
- 컴포넌트 안에서만 영향을 끼치는 상태
- 다른 컴포넌트와 데어터를 공유하지 않는 폼 데이터는 대부분 로컬 상태
: 전역 - 프로젝트 전체 혹은 여러 컴포넌트에서 관 리되는 상태
- 다른 컴포넌트와 상태를 공유하고 영향을
끼치는 상태
- 하나의 출처 = 전역 공간 볼 수 있다.
전역 상태에서의 데이터 무결성
데이터 무결성이란?
: 데이터의 정확성을 보장하기 위해 데이터의 변경이나 수정 시 제한을 두어 안정서을 저해하는 요소를 막고 데이터 상태들을 항상 옳게 유지하는 것이다.
즉, 동일한 데이터는 항상 같은 곳에서 데이터를 가져온다.

Redux(혹은 Flux Pattern)에서 사용하는 Action, Reducer 그리고 Store의 의미와 특징을 이해할 수 있다.

Redux의 3가지 원칙이 무엇이며, 주요 개념과 어떻게 연결되는지 이해할 수 있다.

1. single source of truth
-동일한 데이터는 항상 같은 곳에서 데이터를 가져온다. 데이터를 가져오는 하나의 store라는 공간이 있다는 것!
2. state is read-only
-액션이라는 객체를 통해서 state를 가져온다!
3. changes are made with pure functions

store : 상태가 관리되는 오직 하나의 공간
action : 자바스크립트 객체 / type 지정 꼭 해준다.
reducer : 현재 상태와 action을 이용해 다음 상태를 만들어낸다. 액션 객체는 디스패치에게 전달되고 디스패치는 리듀서를 호출해서 새로운 스테이트 생성!

, action 객체는 dispatch에게 전달되고, dispatch는 reducer를 호출해서 새로운 state 생성!

redux의 장점
1. 상태를 예측 가능하게 만들어 준다.
2. 유지보수
3. 디버깅에 유리하다(action과 state log기록시)
4. 테스를 붙이기 쉽다. (순수함수를 사용하기때문에!)

**Presentational 컴포넌트와 Container 컴포넌트의 개념을 이해할 수 있다.

**
Redux hooks(useSelector, useDispatch)를 사용해 store를 업데이트할 수 있다.

Side Effect : 함수의 입력 외에도 함수의 결과에 영향을 미치는 요인.
ex) 네트워크 요청, API호출

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

Bare minimum requirements

TODO: 장바구니에 추가 및 상품 갯수 업데이트

------삭제는 아이템 개수에서는 삭제되는데
왜 구동이 안되는지 좀 더 공부해봐야할거같다

Bare minimum requirements
: 이 과정을 통해
Action, Reducer, Dispatch, Store
어떻게 유기적으로 연결되어있는지 배울 수 있다.

Action : 어떤 액션을 취할 것인지 정의해 높은 객체

{ type: ‘ADD_TO_CART’, payload: request }

여기서 type은 필수로 지정을 해 줘야 하며 그 외의 것들은 선택적으로 사용할 수 있다.
이렇게 모든 변화를 action을 통해 취하는 것은 우리가 만드는 앱에서 무슨 일이 일어나고 있는지 직관적으로 알기 쉽게 하는 역할을 합니다.

Dispatch : Action을 전달하는 메소드. dispatch의 전달인자로 Action 객체가 전달됩니다. 그리고 Reducer를 호출해 state의 값을 바꾸는 역할을 한다.

Store : state가 관리되는 오직 하나뿐인 저장소의 역할을 한다. Redux 앱의 state가 저장되어 있는 공간이다.

const store = createStore(rootReducer);
: createStore 메소드를 활용해 reducer를 연결하는 방법.
createStore와 더불어 다른 리듀서의 조합을 인자로 넣어서 스토어를 생성할 수 있다. (실제 소스 코드에서는 미들웨어와 Redux devtools 지원을 위해 두번째 인자에 추가적인 내용이 들어가있다.)

Reducer : 현재의 state와 Action을 이용해서 새로운 state를 만들어 내는 pure function.

const itemReducer = (state = initialState, action) => {
switch (action.type) {
case ADD_TO_CART:
return Object.assign({}, state, {
cartItems: [...state.cartItems, action.payload]
})
default:
return state;
}
}
: 쇼핑몰에서 크게 볼 수 있는 장바구니 추가 액션에 대한 코드.

Reducer의 Immutability(불변성)
: Reducer 함수를 작성할 때 주의해야 할 점!
-> Redux의 state 업데이트는 immutable한 방식으로 변경해야한다.
Redux의 장점 중 하나인 변경된 state를 로그로 남기기 위해서 꼭 필요한 작업이다.

//////React life cycle 키워드로 검색

----Action, Reducer, Dispatch, Store 개념들을 코드로 구성하는 것은 완료-----

이제 이 개념들을 연결시켜줘야한다.
connect 할 수 있는 방법은 두 가지가 있다.
1.mapStateToProps, mapDispatchToProps 등 의 메소드를 이용하는 방법
2. Redux hooks를 이용하는 방법
: Redux hooks에서는 크게useSelector(), useDispatch() 이 2가지의 메소드를 기억.

useSelector()
: useSelector()는 컴포넌트와 state를 연결하는 역할.
컴포넌트에서 useSelector 메소드를 통해 store의 state에 접근할 수 있는 것.
useSelector의 전달인자로는 콜백 함수를 받으며 콜백 함수의 전달인자로는 state 값이 들어감.

useDispatch()
: ction 객체를 Reducer로 전달해주는 메소드.
Action 이 일어날만한 곳은 클릭 등의 이벤트가 일어나는 컴포넌트.