리덕스(Redux)

• 상태 관리 라이브러리, 중앙 집중식 상태관리 패턴 구현
• React뿐만 아니라 다양한 JavaScript 애플리케이션에서 사용 가능
• Flux 아키텍처를 기반으로 설계

Redux의 장단점

• 장점
  1. 상태 관리가 쉬우며 유지 보수를 위해 추적하기 용이
  2. 컴포넌트 공유 관리 용
• 단점
  1. 보일러플레이트(필요 최소한으로 갖추어야 할 코드) 코드 증가(액션, 리듀서, 스토어 등)
  2. 초기 학습이 어려움
  3. 소규모 프로젝트에는 과함 (계층 구조 3단계 이상에서 추천)

Redux 사용 방법

1. Redux 설치 원하는 버전이 있다면 @버전번호 추가

   

2. Redux Store(총괄책임자) 생성 (.js 파일로 생성) 경로 예시) src/store/store.js

3. Slices(최소단위 파일) 생성((.js 파일로 생성) 경로 예시) src/store/slices/.js 혹은 src/store/modules/.js

   • slices 기본 형태
     • 파일명 = 변수명 = name 을 동일하게 설정

   // src/store/slices/list.js
   
   import { createSlice } from "@reduxjs/toolkit";
   
   // 'list' 상태관리 slice 생성 및 설정
   const list = createSlice({
     name: 'list', // silce 명
     initialState: { // 상태 관리할 state를 정의하는 역역
       cnt: 0,
     },
     reducers: { // state의 상태를 변화시키는 actions를 정의하는 역역
       addCnt(state) { // state: initialState영역
         state.cnt += 1;
       }, 
       minusCnt(state) {
         state.cnt -= 1;
       },
       changeCnt(state, action) {
         // state: 'initialState'의 정보를 담고 있는 파라미터
         // action: 외부에서 전달 된 값을 담는 파라미터
         //    >action.payload: 전달된 값에 접근할 수 있는 프로퍼티
         state.cnt = action.payload;
       },
     }
   });
   
   // 정의한 Actions 내보내기
   // 컴포넌트에서 호출
   export  const {addCnt, minusCnt, changeCnt}  = list.actions;
   
   // Reducer 내보내기
   // Store에서 호출
   export default list.reducer;
   

4. 생성한 Slices를 Store에 추가

   • store 기본 형태

   // src/store/store.js
   
   import { configureStore } from "@reduxjs/toolkit";
   import listReducer from "./slices/list.js";
   
   // Redux Store 생성 및 설정
   export default configureStore({
     reducer: {
       list: listReducer,
     }
   });
   

5. main.jsx에 React Redux <Provider> 추가 (StrctMode를 제외한 치상위 컴포넌트일 것)

   // main.jsx
   
   import { StrictMode } from 'react';
   import { createRoot } from 'react-dom/client';
   import App from './App.jsx';
   import { Provider } from 'react-redux';
   import store from './store/store.js';
   
   createRoot(document.getElementById('root')).render(
     <StrictMode>
       <Provider store={store}>
         <App />
       </Provider>
     </StrictMode>
   );
   

6. 등록한 Redux 사용

   • State 접근 방법
     • React-Redux의 useSelector 훅을 임포트
     • 컴포넌트 내에서 const 변수명 = useSelector(state => state.가져올 slices.가져올 state의 속성); 을 통해 State 획득
   • Actions 사용 방법
     • React-Redux의 useDispatch 훅을 임포트
     • 컴포넌트에서 const dispatch = useDispatch(); 을 액션을 디스패치할 수 있는 함수 획득
     • 사용하고자 하는 곳에 dispatch(액션명()) 을 이용해 Action 호출

   // List.jsx
   
   import { useDispatch, useSelector } from 'react-redux';
   import './List.css';
   import { addCnt, minusCnt } from '../store/slices/list';
   
   function List() {
     // State에 접근하는 방법
     // state는 store이기 때문에 slice 명도 함께 적어 접근함
     const cnt = useSelector(state => state.list.cnt); 
   
     // action 호출 방법
     const dispatch = useDispatch();
   
     return (
       <>
         <h1>리스트 페이지</h1>
         <p>{cnt}</p>
         <button type="button" onClick={() => { dispatch(minusCnt()) }}>-</button>
         <button type="button" onClick={() => { dispatch(addCnt()) }}>+</button>
       </>
     );
   }
   
   export default List;
   

   // App.jsx
   
   import './App.css';
   import List from './components/List.jsx';
   
   function App() {
     return (
       <>
         <List></List>
       </>
     )
   }
   
   export default App;
   

input의 value가 string으로 저장됨