Redux의 필요성

1. useState의 불편함
   부모=>자식에게 내려줄때 여러 컴포넌트를 거치게 되면 단순히 전송을 위해 쓰이는 컴포넌트들이
   생김 불필요하면서도 prop drilling이 생길 수 있어 비효율적이다.
   Redux사용시 이런 불필요한 과정 필요 없이 중앙 state 관리소 역할을 해줌

Global state와 Local state

1. Local state(지역상태)

• 컴포넌트에서 useState를 이용해 생성한 state. 좁은 범위 안에서 생성된 State
  
  

2. Global state(전역상태)

• Global state는 컴포넌트에서 생성되지 않는다. 중앙화 된 특별한 곳에서 State들이 생성.
  좀 더 쉽게 중앙 state관리소 라고 생각하면 됨.

리덕스(Redux)

위에서 언급한 "중앙 state 관리소" 를 사용할 수 있게 도와주는 라이브러리
리덕스 = 전역 상태(Global State)관리 라이브러리 라고 얘기 함
action —> dispatch —> reducer 순으로 동작

카운터 프로그램으로 알아보는 Redux사용법

1. 터미널에 yarn 혹은 npm을 통해 redux와 react-redux를 동시에 설치 (공백으로 구분)

yarn add redux react-redux

2. 추후 편한 작업을 위해 src폴더 내에 redux 폴더를 생성 그 내부에 config폴더를 생성하고 config폴더 안에 configStore.js 파일 생성 redux폴더 내부에는 modules폴더 생성
   
   
   redux 폴더 : 리덕스 관련 코드를 모두 몰아넣음
   config 폴더 : 리덕스 설정 관련 파일 모두
   configStore파일 : 중앙 state 관리소 => 설정 코드(.js)
   modules 폴더 : state의 그룹 (예를 들어 todolist를 만든다면 todolist에 필요한 state가 모두 모여있는 파일을 넣는 폴더)

3. createStore,combineReducers를 import
   combineReducers 내부 인자는 객체로 넣어줄 것이기에 일단 빈 객체 넣어줌
   아래 변수에 createStore를 호출하고 내부 인자로 rootReducer를 넣어줌

4. index.js에서 configStore를 import하고 Provider를 통해 App을 감싸고 옵션으로 store(configStore) 부여 이러면 App컴포넌트는 Provier의 지배를 받게 됨

5. modules 폴더에 해당 프로그램에 필요한 counter.js라는 파일 생성 후 초기 값 설정과 리덕스를 활용한 함수(리듀서)를 만든다. action객체는 카운트를 + 할건지 - 할건지 결정함
   switch문을 통해 action객체의 타입에 따라서 어떻게 할건지 결정

6. configStore에 방금 만든 counter.js를 import하고 combineReducers에 키 밸류 페어 형태로 counter를 넣어준다.

useSelector

7. 사용하고자 하는 컴포넌트에서 useSelector라는 리덕스 훅을 통해 데이터를 가져온다.

• 중간정리
  쉽게 말해 modules폴더에 사용하고자 하는 함수 지정
  그 함수를 configStore의 combineReducers에 키 밸류로 넣음(저장소)
  그 내용을 사용하고자 하는 컴포넌트에서 useSelector를 통해 원하는 데이터만 꺼내올 수 있다.
  (state.함수이름)

8. switch문 내부에 타입과 리턴값을 지정해준다.

useDispatch

9. 사용하고자 하는 컴포넌트에서 useDispatch를 통해 속성으로 dispatch를 넣은 뒤 방금 지정한 타입중 원하는 타입을 넣어준다.

이러면 원하는 대로 값이 +,- 되는 카운팅 앱이 완성된다.

여기서 좀 더 리팩토링을 하면

action Value

case 이름을 변수화 시킨뒤 export시켜 원하는 곳에서 공통적으로 관리가 가능하다.(PLUS_ONE을 변수화 시킴) 이렇게 되면 해당 case가 사용되는 모든 곳의 이름을 변경해야 할때 한곳에서만 변경해도 정상동작

action Creator

action value값을 함수로서 지정해 하드코딩을 최대한 피해 호출하는 방법도 있다.

Payload

action 객체는 type과 payload라는 속성이 있다.
action 객체는 action type을 payload만큼 처리하는 것.


input값에 입력된 값 만큼 +,- 되게 하는 코드