상태를 전역에서 관리하도록 도와주는 라이브러리인 리덕스
오늘은 점점 사용자가 증가하고 있는 리덕스 툴킷을 배웠다.
리똑스 !
일단 설치
라이브러리이기 때문에 사용할려면 설치가 필요하다
사용할 프로젝트에서 터미널에 아래와 같이 입력해준다.
npm install @reduxjs/toolkit react-redux
리액트에서 리덕스 툴킷을 사용할 예정이라면!
설치하기전에 package.json 파일을 열어서react react-dom 항목의 버전이 18.1.x 이상인지 확인해야한다!
확인한 후 설치하면 일단 셋팅은 끝!
Store.js 파일만들기
상태를 관리할 파일인 Store.js 파일을 만들고 아래와 같이 작성
import { configureStore } from "@reduxjs/toolkit";
export default configureStore({
reducer: {
}
})index.js 파일에서 아래와 같이 작성
import { Provider } from "react-redux";
import store from './store.js'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Provider store={store}> 🔥
<BrowserRouter>
<App />
</BrowserRouter>
</Provider> 🔥
</React.StrictMode>
); provide 를 import 해와서 불 이모지가 있는 곳처럼 APP 컴포넌트를 감싸준다. 그리고 Store 도 import 해와서 provide의 속성 값으로 store 도 넣어준다.
State 관리
State 를 만들어서 보관하기 위해 Store.js 파일에서 state를 관리하거나 새로운 파일에서 state 를 관리
Store.js 에서 관리한다고 하면
- createSlice() 를 import 해와 state 만들고
- configureStore 내부 reducer 에 등록하면 된다.
import { configureStore,createSlice } from "@reduxjs/toolkit";
let user = createSlice( {
// state 상태를 저장할 변수
name : 'user',
// state 상태 값
initialState: 'lee'
)}
export default configureStore({
reducer: {
// 여기에 작성!
//{ 작명 : createSlice만든거.reducer }
// 보통은 createSlice를 할당한 변수명을 동일하게 사용한다.
user : user.reducer
}
})컴포넌트에서 상태 사용해보기
상태를 저장까지 했다면 이제 다른 컴포넌트에서 저장된 상태를 사용해보자..!
임의의 컴포넌트 Cart 컴포넌트가 있다는 가정하에
Cart 컴포넌트
import { useSelector, useDispatch } from "react-redux";
function Cart () {
let dispatch = useDispatch()
let state = useSelector((state) => {return state})
console.log(state) // {user : 'lee'}
상단에 useSelector 를 import 해와서 컴포넌트 내부에서 위의 코드와 같이 작성해준다..! 그럼 Store.js 파일에 저장하고 있던 State 상태를 꺼내올 수 있게 된다! 이게 useSelector 의 기능이다!
State 변경하기
상태 변경의 3 step
import { configureStore,createSlice } from "@reduxjs/toolkit";
let user = createSlice( {
name : 'user',
initialState: 'lee',
Step 1. createSlice() 함수 내부에 state 상태 변경 함수부터 작성 🔥
// 상태 변경 함수는 redusers 내부에 작성!
reducers: {
// 상태를 변경하는 함수
changename(state) {
return state = 'kim'
)}
Step 2. 다른 곳에서 사용할 수 있게 export 해주기 🔥
export let {changename} = user.actions
export default configureStore({
reducer: {
// 여기에 작성!
//{ 작명 : createSlice만든거.reducer }
// 보통은 createSlice를 할당한 변수명을 동일하게 사용한다.
user : user.reducer
}
})-
Step 1 에서 상태 변경 함수는
reducers내부에 작성해야한다.! -
Step 2 에서 다른 곳에서 사용할 수 있게 export 해주는데 이때
Slice이름.action이라고 작성해주고 상태변경 함수에 할당한다 -
Step 3 상태를 사용할 컴포넌트에서 import 해주고 사용
Cart 컴포넌트
Step 3
// 상태 변경 함수를 사용할려면 dispatch 도 필요하다! 🔥
import { useSelector, useDispatch } from "react-redux";
// 1. 상태변경 함수 import 해오기 🔥
import {changename} from './store 경로'
function Cart () {
// 2. useDispatch 도 아래와 같이 작성해준다 🔥
let dispatch = useDispatch()
let state = useSelector((state) => {return state})
// 3. 사용할 곳에서 아래와 같이 사용해준다. 🔥
dispatch(changename())
useDispatch을 사용하게 되면 상태가 저장되어있는 곳으로 이동해 전달 인자로 받은 상태 변경 함수를 통해 상태 값을 변경시키게 된다. 즉 현재 컴포넌트에서 상태 변경 함수가 있는 곳으로 이동하게해주는 역할을 수행한다! (연결다리라고생각)
이때 해당 컴포넌트에서 chagename(여기에 넣는다는 말) 생성자 함수에 전달인자를 넣을 수 도 있다..!
그렇게 되면 상태 변경함수는
import { configureStore,createSlice } from "@reduxjs/toolkit";
let user = createSlice( {
name : 'user',
initialState: 'lee',
reducers: {
// 상태 변경함수를 사용한 컴포넌트에서 상태 변경 함수에 전달인자를 추가한 경우! 🔥
//action 이라는 매개변수로 들어오게 되고 그 값을 활용할려면 action.payload라고 작성해야한다!
changename(state , action) {
return state = 'kim' + action.payload
)}
export let {changename} = user.actions
export default configureStore({
reducer: {
// 여기에 작성!
//{ 작명 : createSlice만든거.reducer }
// 보통은 createSlice를 할당한 변수명을 동일하게 사용한다.
user : user.reducer
}
})상태 변경 함수에서 전달인자를 받아 상태를 변경시키기 위해선 전달인자가 들어오는 자리에 매개변수로 action을 그 전달인자를 사용할 값의 자리에는 action.payload 를 작성해서 사용하면 된다..!
리덕스 툴킷 사용방법은 여기까쥐!
끝
