01. Redux 소개

(1) 리덕스가 필요한 이유

1. useState가 불편해서

📢 State를 공유하고자 할때 부-모 관계가 아니어도 되고, 중간에 불필요한 전달책이 필요없다!

• `
  

1. 컴포넌트에서 컴포넌트로 State를 보내기위해서는 반드시 부-모 관계가 되어야 함
2. 조부모 컴포넌트에서 손자 컴포넌트로 값을 보내고자 할때도 **반드시 부모 컴포넌트를 거쳐야만 한다. 그 값이 부모에게 필요없는 값이어도
3. 자식 컴포넌트에서 부모 컴포넌트로 값을 보낼 수 없다.

2. Global state와 Local state

a. Local state ?

• 컴포넌트단위에서 useState를 이용해서 생성한 state

b. Global state ?

• 중앙 state 관리소 에서 생성한 state
• 컴포넌트가 어디에 있든 상관없이 state를 불러와서 사용할 수 있다.
• 이러한 값들을 관리하는 것을 전역 상태 관리 라고 한다.
  

3. Context API가 있는데 굳이 Redux?

a. Context API

• React 자체제공 전역 상태 관리 도구
• 복잡한 상태 관리, 대규모 어플리케이션에 적합하지 않음
• Provide 하위의 모든 컴포넌트를 리랜더링 -> 복잡한 최적화

b. Redux

• 성능최적화 상태 변경 시 관련된 컴포넌트만 선택적으로 업데이트 -> 선택관리 용이
• 상태 로직의 중앙화, 일관성 애플리케이션 상태를 하나의 저장소(store)에 저장 -> 일관성, 예측 가능한 상태 변경
  리듀서(Reducers)에 의해 처리 -> 디버깅, 테스팅 용이
• 미들웨어와 개발도구 다양한 미들웨어 지원. 비동기, 로깅, 상태 변경에 대한 추가 처리등 복잡한 기능 구현
  Redux Devtools를 통해 상태 변화를 시각적으로 모니터링, 롤백 가능

(2) 리덕스란?

중앙 state 관리소를 사용할 수 있게 도와주는 패키지(라이브러리)

02. Redux 설정

(1) 리덕스 설정

1. 리덕스 설치

yarn add redux react-redux
아래와 같은 의미

yarn add redux
yarn add react-redux

2. 폴더 구조 생성

1. src 폴더 안에 redux 폴더를 생성
2. redux 폴더 안에 config, modules 폴더를 생성
3. config 폴더 안에 configStore.js파일을 생성

• redux : 리덕스와 관련된 코드를 모두 모아 놓을 폴더
• config : 리덕스 설정과 관련된 파일들을 놓을 폴더
• configStore : “중앙 state 관리소" 인 Store를 만드는 설정 코드들이 있는 파일
• modules : State들의 그룹. 예를 들어 투두리스트를 만든다고 한다면, 투두리스트에 필요한 state들이 모두 모여있을 todos.js를 생성하는데, 이 todos.js 파일이 곧 하나의 모듈이 됨

(2) 설정코드 작성

1. src/configStore.js

src/configStore.js

import { createStore } from "redux";
import { combineReducers } from "redux";

/*
1. createStore()
리덕스의 가장 핵심이 되는 스토어를 만드는 메소드(함수) 입니다. 
리덕스는 단일 스토어로 모든 상태 트리를 관리한다고 설명해 드렸죠? 
리덕스를 사용할 시 creatorStore를 호출할 일은 한 번밖에 없을 거예요.
*/

/*
2. combineReducers()
리덕스는 action —> dispatch —> reducer 순으로 동작한다고 말씀드렸죠? 
이때 애플리케이션이 복잡해지게 되면 reducer 부분을 여러 개로 나눠야 하는 경우가 발생합니다. 
combineReducers은 여러 개의 독립적인 reducer의 반환 값을 하나의 상태 객체로 만들어줍니다.
*/

const rootReducer = combineReducers({}); 
const store = createStore(rootReducer); 

export default store; 

index.js

// 원래부터 있던 코드
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

// 우리가 추가할 코드
import store from "./redux/config/configStore";
import { Provider } from "react-redux";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(

	//App을 Provider로 감싸주고, configStore에서 export default 한 store를 넣어줍니다.
  <Provider store={store}> 
    <App />
  </Provider>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

(3) 모듈 만들기

카운터 프로그램 만들기 레츠고

1. 첫 모듈 만들기

모듈? state의 그룹.

1. modules폴더에 counter.js 파일 생성
2. 코드 작성

// src/redux/modules/counter.js

// 초기 상태값
const initialState = {
  number: 0,
};

// 리듀서
const counter = (state = initialState, action) => {
  switch (action.type) {
    default:
      return state;
  }
};

// 모듈파일에서는 리듀서를 export default 한다.
export default counter;

(4) 모듈의 구성요소 살펴보기

1. initialState === 초기 상태값

// 초기 상태값

// 초기 상태값
const initialState = {
  number: 0,
};

초기값은 { } (객체) 이고, 그 안에 number 라는 변수에 초기값 0을 할당해준 것
초기값은 꼭 객체가 아니어도 된다. 배열, 원시데이터 전부 OK
객체에도 여러개의 변수를 넣어줄 수 있음

// 초기값이 0
const initialState = 0;

// 초기값이 0이 있는 배열 
const initialState = [0];

// 초기값이 number = 0, name = '짱구'인 객체
const initialState = {
	number: 0,
	name: '짱구'
};

// useState 버전 
const [number, setNumber] = useState(0) // < 이거랑 같다

useState를 사용했을 때 괄호 안에 초기값을 지정해주던 것과 같음

2.Reducer === 변화를 일으키는 함수

변화를 일으키는 함수 다

// 리듀서 
const counter = (state = initialState, action) => {
  switch (action.type) {
    default:
      return state;
  }
};

아래는 useState 버전.

// useState 버전 

const onClickHandler = () => {
	setNumber(number + 1); // setState를 이용해서 state 변경
}

useState 를 사용할 때 값을 바꾸고 싶으면 setNumber를 사용했다.
리덕스에서는 리듀스가 이 역할을 한다.

// src/redux/modules/counter.js


// counter 리듀서
const counter = (state = initialState, action) => {
  switch (action.type) {
    default:
      return state;
  }
};

export default counter; // 여기

리듀서의 인자에 있는 (state = intialState, action)
첫번째 자리에서는 state를, 두번째 자리에서는 action 이라는 것을 꺼내서 사용할 수 있다.
💡 state = intialState 처럼 state에 initialState를 할당해줘야 하는 것만 기억.

3. 카운터 모듈을 스토어에 연결

만든 모듈을 스토어에 연결 시켜야 한다! 아직은 state를 스토어에서 꺼낼 수 없는 상태

configStore.js 에서 아래 코드 추가

// src/redux/config/configStore.js


// 원래 있던 코드
import { createStore } from "redux";
import { combineReducers } from "redux";

// 새롭게 추가한 부분
import counter from "../modules/counter";

const rootReducer = combineReducers({
  counter: counter, // <-- 새롭게 추가한 부분
});
const store = createStore(rootReducer);

export default store;

(5) 스토어와 모듈 연결 확인

1. useSelector = 스토어 조회

📢 컴포넌트에서 스토어를 직접 조회할 때 react-redux에서 제공하는 useSelector 라는 훅을 사용

// 1. store에서 꺼낸 값을 할당 할 변수를 선언합니다.
const number = 

// 2. useSelector()를 변수에 할당해줍니다.
const number = useSelector() 

// 3. useSelector의 인자에 화살표 함수를 넣어줍니다.
const number = useSelector( ()=>{} )

// 4. 화살표 함수의 인자에서 값을 꺼내 return 합니다. 
// 우리가 useSelector를 처음 사용해보는 것이니, state가 어떤 것인지 콘솔로 확인해볼까요?
const number = useSelector((state) => {
	console.log(state)
	return state
});

App.js

// src/App.js

import React from "react";
import { useSelector } from "react-redux"; // import 해주세요.

const App = () => {
  const counterStore = useSelector((state) => state); // 추가해주세요.
  console.log(counterStore); // 스토어를 조회해볼까요?

  return <div></div>;
}

export default App;

브라우저를 켜고, 콘솔을 보면 아래 이미지처럼 객체가 보이고, 그 안에 counter 라는 값이 있는 것을 볼 수 있다. 우리가 만든 counter 라는 모듈의 state가 보이는 것을 알 수 있다. 이렇게 화살표 함수에서 꺼낸 state라는 인자는 모든 리덕스 모듈의 최상위 객체를 의미하는 Root State인 것

컴포넌트에서 number라는 값을 사용하고자 한다면 아래 코드처럼 꺼내서 사용

const number = useSelector(state => state.counter.number); // 0