◼ 설치

npm install redux react-redux

◼ 폴더구조

• redux : 리덕스와 관련 코드 모음 폴더
• config : 리덕스 설정 관련 폴더
• configStore : “중앙 state 관리소"인 Store를 만드는 설정 코드 파일
• modules : State들의 그룹.

├redux_folder
│├node_modules
│├public
│├src
││├redux
│││├config
││││└configStore.js
│││└modules
││├App.js
││├index.js
││├reportWebVitals.js
││└setupTests.js
│├.gitignore
│├package.json
│└README.md
├.gitignore
└README.md

◼ 설정코드

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();

◼ 모듈 생성

모듈이란, State의 그룹.

// 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;

초기 상태값(initialState)

단어 그대로 state의 초기값.
useState의 초기값과 동일한 개념.

// 초기 상태값
const initialState = {
  number: 0, // number라는 변수에 초기값 0을 할당해준 것.
};

// useState 예시
const [number, setNumber] = useState(0)

초기값은 객체, 배열, 원시데이터 모두 가능. 객체에 여러개의 변수를 넣을 수 있음.

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

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

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

리듀서(Reducer)

리듀서는 state 변화를 만드는 함수. 리덕스에서 state를 직접 수정하지 않음.
항상 리듀서를 통해 변경함.

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

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

useState에서는 setNumber가 state 변경 역할 담당함.
리덕스에서는 리듀서가 setState 역할을 수행함.
“number에 +1 해라”라는 명령을 받으면 리듀서가 실제 변경을 수행함.

// src/redux/modules/counter.js

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

export default counter; // 여기

리듀서는 반드시 state를 return 해야 함. 변경이 없으면 기존 state 그대로 반환함.
state = initialState 설정 필수임. 초기 state 할당 목적임.

◼ 스토어와 모듈 연결 확인

useSelector(스토어 조회)

useSelector는 스토어 조회용 훅.
모듈이 스토어에 잘 연결됐는지 확인하는 법은 컴포넌트에서 스토어를 직접 조회해보면 됨.

사용 단계 정리

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

// 2. useSelector()를 변수에 할당.
const number = useSelector() 

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

// 4. 화살표 함수의 인자에서 값을 꺼내 return.
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 모듈 존재함.
여기서 state는 모든 리덕스 모듈을 포함한 최상위 객체임.
이를 Root State라고 부름.

특정 값만 사용하고 싶을 때 예시

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