9. Redux를 사용한 상태관리

Redux는 상태(State)를 관리하고 상태 변경을 예측 가능한 방식으로 처리하기 위한 상태 관리 라이브러리이다. 

컴포넌트들이 props 없이도 상태의 공유가 가능하기 때문에 복잡한 프로젝트에서 관리하기 간편해진다. 

 

주요 개념 

1. Store: 앱의 상태를 저장하는 중앙 저장소로, Redux 상태는 읽기 전용으로 상태 변경은 Action을 통해 이루어진다. 

2. Action: 상태 변경을 하는 트리거 객체. { type:'ACTION_TYPE', payload:... } 형태로 정의되며, type은 액션의 종류 payload는 변경할 데이터를 포함할 수 있다. 

3. Reducer: 이전 상태와 액션을 받아와 새로운 상태를 반환하는 함수로, 상태 변경을 실제로 처리하는 로직이 이루어진다. 

5. Dispatch: Action을 발생시키는 메서드로 액션을 보내 상태 변경 트리거를 작동시킨다. 

6. Selector: 컴포넌트에서 Redux 상태를 가져와 사용할 수 있다.

 

1. 시작하기 

npm install @reduxjs/toolkit react-redux

터미널에 위 코드를 입력하여 설치해준다. 이때, 설치 전 pakage.json의 react, react-dom이 18버전 이상이어야 한다. 

 

2. 세팅

src 폴더에 store.js를 생성한다. 

// store.js

import { configureStore } from '@reduxjs/toolkit'


export default configureStore({
  reducer: {}
})

 

그 후 index.js에서 <Provider>를 통해 공급해준다. 

// index.js

import { Provider } from 'react-redux';
import store from './store';

root.render(
    <Provider store={store}>
     <App />
    </Provider>
);

 

 

3. state 등록 및 사용하기 

// store.js

import { configureStore, createSlice } from '@reduxjs/toolkit'

// state 생성 
const user = createSlice({
    name: "user",
    initialState: 'kim'
})

const stock = createSlice({
    name : 'stock',
    initialState : [10, 11, 12]
})

export default configureStore({
  reducer: {
    // state 등록 (작명:state.reducer)
    user : user.reducer, 
    stock : stock.reducer
   }
})

 

// 사용할 컴포넌트 

// Redux Store 가져오는 hook 
  let allState = useSelector((state)=> {return state})
  
// 이때, 사용하고 싶은 state만 가져오려면 .state이름 을 붙이면 된다. 
  let user = useSelector((state)=> {return state.user})
  let stock = useSelector((state)=> {return state.stock})

 

 

4. state 변경하기 

store.js에 변경 함수를 등록한다. 

const user = createSlice({
    name: 'user', 
    initialState : { name: 'gil dong', age : 20},
    reducers : {
        // 이곳에 함수 생성 
        changeName(state) {
            state.name = 'Park ' + state.name
        }, 
        // 매개변수가 필요한 경우 대게 action으로 받아오며 payload를 붙여줘야한다. 
        changeAge(state, action) { 
            state.age += action.payload
        }
    }
})

// 함수를 외부에서 사용할 수 있도록 export 해준다.
export let { changeName, changeAge } = user.actions;


export default configureStore({
  reducer: {
    user : user.reducer
   }
})

 

해당 함수를 사용하려는 컴포넌트에서 import하여 사용할 수 있다.

// 함수 import 
import { changeName, changeAge } from "../store";

// Redux Store 가져오는 hook 
let user = useSelector((state)=> {return state.user})

// store.js로 요청을 보내는 함수, dispatch(state변경함수()) 형태로 작성
let dispatch = useDispatch(); 

return (
		<div style={{textAlign:"start"}}>
        
			<div>이름: {user.name}</div>
			<div>나이: {user.age}</div>
            
			<button onClick={()=>{ dispatch(changeName()) }}>
   			 이름 변경
			</button>
            
			<button onClick={()=>{ dispatch(changeAge(3)) }}>
               		 age 변경
			</button>
		</div>
);

 

* 각각의 state는 컴포넌트를 분리하여서도 관리할 수 있다. 

// userSlice.js
import { createSlice } from "@reduxjs/toolkit"

const user = createSlice({
    name: 'user', 
    initialState: { name: 'gil dong', age : 20 },
    reducers : {
        changeName(state){
            state.name = 'Park ' + state.name
        },
        // 파라미터는 보통 action으로 지정
        changeAge(state, action){
            state.age += action.payload
        }
    }
})

export let { changeName, changeAge } = user.actions

export default user;

 

 

store.js에서 import하여 함께 사용할 수 있다. 

// store.js
import user from './store/userSlice';