개요
리액트에서 상태관리를 할 때 리덕스를 쓰는 이유!!
1. 전역으로 상태 관리가 가능하다.
그냥 간단하게 하나의 파일 안에서 상태를 바꾸고 싶으면 간단하게 useState를 사용하면 되지만, 파일은 하나가 아니기에... 모든 파일을 넘나들 수 있도록 관리하는 게 필요하다.
2. 따라서 리덕스를 쓰면! 무한 props 지옥에서 탈출할 수 있다...
리덕스를 쓰면 아주아주 깔삼하게 상태 관리를 할 수 있다.
처음에는 리덕스가 너무 어려웠는데 이젠 아주 편하게 사용 중이다.
리덕스를 어떻게 사용해야 할지 잘 모르겠다면 밑에 있는 내용대로만 하면 아주 편할 거다.
사용법
1. 우선 리덕스를 설치해준다.
npm install @reduxjs/toolkit react-redux
2. 루트(App.js와 동일한 위치)에 store.js를 하나 만들어준다.
하나의 리액트 폴더에는 App.js가 하나 있는 것처럼, store.js도 무조건 하나만! 있어야 한다.
3. App.js와 index.js를 Provider로 감싸준다.
App.js
import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import StickerComponent from './StickerComponent';
function App() {
return (
<Provider store={store}> //이렇게 Provider로 감싸준다
<div className="App">
<MyComponent />
</div>
</Provider>
);
}
export default App;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { Provider } from 'react-redux';
import store from './store';
ReactDOM.render(
<Provider store={store}> //이렇게 Provider로 감싸준다
<App />
</Provider>,
document.getElementById('root')
);
reportWebVitals();
4. slice를 만들어준다.
하나의 slice 안에는 여러 변수들을 넣을 수 있다. 나는 loginSlice를 만들어줬고, 그 안에 userId, token, hostid, alreadyuser를 넣어줬다. 이제 상태가 업데이트 되면 loginSlice가 업데이트 될 것이다.
초기값을 꼭 설정해줘야 하는데 initialState라는 객체를 하나 만들어서 넣어줘도 되고, 그냥 슬라이스 안에 넣어줘도 된다.
import { createSlice } from "@reduxjs/toolkit";
const initialState = {
userId: null,
token: null,
hostid: null,
alreadyuser: false,
};
const loginSlice = createSlice({
name: "login",
initialState,
reducers: {
setId: (state, action) => {
state.userId = action.payload;
},
setToken: (state, action) => {
state.token = action.payload;
},
setHostId: (state, action) => {
state.hostid = action.payload;
},
//이미 가입한 유저
setAlreadyuser: (state, action) => {
state.alreadyuser = action.payload;
},
},
});
export const {
setAlreadyuser,
setId,
setToken,
setHostId,
} = loginSlice.actions;
export default loginSlice.reducer;
5. store.js에 내가 만든 slice를 넣어준다.
나는 위에서 export default loginSlice.reducer를 해주어서 이를 불러와서 저장해주었는데 그냥 export default loginSlice라고만 하고 store에서 login:loginSlice.reducer라고 해줘도 된다.
import { configureStore } from "@reduxjs/toolkit";
import loginReducer from "./login/LoginSlice";
const store = configureStore({
reducer: {
login: loginReducer, //이렇게 추가!
},
});
export default store;
6. 이제 상태를 업데이트하고 불러올 수 있다!
[상태 업데이트]
리덕스에서 상태를 업데이트 할 때는 dispatch함수를 사용한다.
const dispatch = useDispatch();
이렇게 선언해주고 import 한 뒤, 나서 사용하면 된다.
내가 위에 있던 alreadyuser를 true로 만들어주고 싶다면, setAlreadyuser를 import하고
dispatch(setAlreadyuser(true));
이렇게 써주면 값이 true로 바뀐다.
[상태 가져오기]
리덕스에서 상태를 가져올 때는 useSelector를 사용한다.
useSelector는 import 해주고 바로 사용하면 된다.
alreadyuser를 가져오고 싶으면,
const alreadyUser = useSelector((state) => state.login.alreadyuser);
이렇게 써주고, alreadyUser를 사용하면 된다.
'study > 프론트엔드🔯' 카테고리의 다른 글
[React] React 쿼리 파라미터 추출하는 법 (0) | 2023.11.12 |
---|---|
Vercel이 만든 프론트엔드 생성 AI v0 (1) | 2023.10.08 |
[React] 드디어 해낸... 리액트로 카카오 소셜 로그인 구현하기 (1) | 2023.08.07 |
[React] 리액트 클릭한 위치에 이미지 배치하기 (0) | 2023.07.30 |
[Json-server] 프론트에서 mock 서버 만들기 (0) | 2023.07.25 |