UseContext,Consumer

consumer 쓰는법
1.provider 로 한번 감싼 후
2.consumer로 한번 더 감싼다 (구독)
3.이후 내부에 컴포넌트를 넣는다

• useContext 라는 훅을 사용하면 consumer없이 사용가능

1. consumer 쓰는 법
   1. 저장 공간을 생성한다
   2. 프로바이더 컨테이너 생성
   -넘긴 프롭스를 컨슈머 안에서 받을수 있다.
   

2. usecontext 이용해서 데이터 넘겨받는 방법
   

-스토어가 여러개면 관리/코드 정리가 힘들어짐
-구독한 데이터가 바뀔 경우 리렌더링이 잦아짐
-변경이 많지 않은 데이터를 쓸때 적합
-많은 스토어를 쓰지 않는 경우에 적합
-관리해야하는 양이 많아지면 프로바이더,중첩이 많아짐

규모 있는 데이터를 다룰때 ->리코일을 추천
리코일 보다 리덕스가 더 적합하다고 함
->리덕스가 클라이언트 상태 관리에 관해 모든걸 갖고 있음 (다양한 미들웨어-청크(비동기요청할때, api 사용/ 서버사이드 렌더링할때도 사용가능한 미들웨어 있음))

• 리덕스의 컨셉: 모든 상태를 action으로 정의
  -모든 상태를 reducer에서 정의 한다.
  -보일러 플레이트(짜야하는 구조 코드)

1. 리덕스 설치
   yarn add redux react-redux
2. 데이터 저장할 공간 (store) 생성
3. store의 데이터는 reducer만 가능
4. 액션 타입 정의
5. 어떤 식으로 변경할지 (액션생성)
6. 실제로 변경하는것 reducer
   -> 덕스구조 !

리덕스의 흐름

1. 리덕스 store 를 component 에 연결한다
2. component 에서 상태변화가 필요할때 action을 부른다
3. reducer를 통해서 새로운 상태값을 만들고,
4. 새로운 상태 값을 store에 저장한다.
5. component는 새로운 상태값을 받아온다.
   -props를 통해 받아오니까 재랜더링

리덕스란 : 상태관리 라이브러리

-전역 상태 관리를 편하게 할 수있는 도구

state : 리덕스에서 저장하고 있는 상태값을 state

딕셔너리형태로 보관한다

Action: 상태에 변화가 필요할 때 발생하는것

ActionCreator : 액션 생성함수. 액션을 만들기 위해 사용한다

Reducer : 리덕스에 저장된 상태를 변경하는 함수

액션생성 함수-> 액션 생성-> 리듀서가 현재 상태(데이터)와 액션 객체를 받아서 -> 새로운 데이터를 만들고 -> 리턴

store : 리덕스를 적용하기 위해 만드는것

-> 리듀서, 현재 애플리케이션 상태, 리덕스에서 값을 가져오고 액션을 호출하기 위한 몇가지 내장함수 포함

dispatch : 스토어의 내장함수

액션을 발생시키는 역할

• 리덕스가 필요하지 않은 경우

1. 페이지간 공유할 데이터가 없는경우
2. 페이지 이동 시 리패칭이 잦게 일어날 경우
3. 비즈니스 로직이 획일화되기 어려울 경우

-리덕스 툴킷
npm install @reduxjs/toolkit