Store
Redux에서 애플리케이션의 전체 상태(state)를 보관하는 객체
createStore() 또는 configureStore() 함수를 사용하여 생성함스토어는 상태를 보관하고, 상태를 읽고, 상태를 변경하는 흐름의 중심 역할을 함
로그인 페이지 만들기
page/Login.js
import React from 'react';
import { useNavigate } from 'react-router-dom';
function Login(props) {
const navigate = useNavigate();
function loginProcess(){
// 1. form 태그 username, password 가져오기
// 2. 유효성 검사
// 3. 통신
// 4. store 상태변경
// 5. 화면 이동
navigate("/loginComplete");
}
return (
<div>
<button onClick={loginProcess}>로그인</button>
</div>
);
}
export default Login;page/LoginComplete.js
import React from 'react';
function LoginComplete(props) {
return (
<div>
<h1>Login 완료</h1>
<h2>store isLogin : true</h2>
</div>
);
}
export default LoginComplete;App.js
import { BrowserRouter, Route, Routes } from "react-router-dom";
import "./App.css";
import About from "./page/About";
import Home from "./page/Home";
import Nav from "./components/Nav";
import Info from "./page/Info";
import List from "./page/List";
import Login from "./page/Login";
import LoginComplete from "./page/LoginComplete";
function App() {
return (
<BrowserRouter>
<Nav />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/info/:id" element={<Info />} />
<Route path="/list" element={<List />}/>
<Route path="/login" element={<Login />}/>
<Route path="/loginComplete" element={<LoginComplete />}/>
</Routes>
</BrowserRouter>
);
}
export default App;componants/Nav.js
import React from 'react';
import { Link } from 'react-router-dom';
function Nav(props) {
return (
<div>
<Link to="/">홈</Link>
<Link to="/about">소개</Link>
<Link to="/login">로그인화면가기</Link>
</div>
);
}
export default Nav;Reducer store 사용
라이브러리 설치
npm install @reduxjs/toolkit react-redux
// @reduxjs/toolkit 와 react-redux 를 동시에 설치하는 코드
// react-redux 는 상태관리를 위한 라이브러리
//@reduxjs/toolkit 는 react-redux를 쉽게 사용할 수 있는 도구store.js
export const login = () => ({type :"LOGIN"});
export const logout = () => ({type :"LOGOUT"});
const initState = {
isLogin : false,
};
const reducer = (state = initState,action) =>{
switch(action.type){
case "LOGIN":
return {isLogin:true};
case "LOGOUT":
return {isLogin:false};
default:
return state;
}
};
export default reducer;export const login = () => ({type :"LOGIN"}); 와 export const logout = () => ({type :"LOGOUT"}); 는 액션 크리에이터(action creator) 라고 한다. 액션 객체를 직접 작성하는 대신 함수를 호출하는 방식으로 사용할 수 있다.
reducer 함수는 현재 상태(state) 와 액션(action) 을 인자로 받아 새로운 상태를 반환한다.
action.type 이 LOGIN 인 경우 isLogin:true , LOGOUT 인 경우 isLogin:false 를 반환하고 그렇지않다면 초기화된 false 상태가 유지된다.
page/Login.js
import React from 'react';
import { useNavigate } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import { login } from '../store';
function Login(props) {
const navigate = useNavigate();
const dispatch = useDispatch();
function loginProcess(){
// 1. form 태그 username, password 가져오기
// 2. 유효성 검사
// 3. 통신
// 4. store 상태변경
dispatch(login());
// 5. 화면 이동
navigate("/loginComplete");
}
function move() {
navigate("/loginComplete");
}
return (
<div>
<button onClick={loginProcess}>로그인</button>
<button onClick={move}>로그인 안하고 넘어가기</button>
</div>
);
}
export default Login;login.js 에서 로그인을 하지 않고 페이지를 이동하는 버튼을 만든다.
”로그인 버튼”을 누르면 store.js 의 login() 함수가 실행되어 isLogin이 true로 변경된고, “로그인 안하고 넘어가기” 버튼을 누르면 초기 상태값이 유지가 된다.
page/LoginComplete.js
import React from 'react';
import { useSelector } from 'react-redux';
function LoginComplete(props) {
const isLogin = useSelector((state)=>state.isLogin);
return (
<div>
<h1>Login 완료</h1>
<h2>store isLogin : {isLogin.toString()}</h2>
</div>
);
}
export default LoginComplete;useSelector는 react-redux 라이브러리에서 제공하는 훅으로, 리덕스 스토어의 상태를 읽어오기 위해 사용한다.
useSelector훅을 사용하면 함수 컴포넌트에서 리덕스 스토어의 특정 상태를 쉽게 선택하고 사용할 수 있다.
index.js
import { configureStore } from "@reduxjs/toolkit";
import ReactDOM from "react-dom/client";
import { Provider } from "react-redux";
import App from "./App";
import reducer from "./store";
const root = ReactDOM.createRoot(document.getElementById("root"));
const store = configureStore({
reducer: reducer,
});
root.render(
<Provider store={store}>
<App />
</Provider>
);reduxjs/toolkit 를 사용할 때 index.js 에서 provider와 store 등록해야 한다.
Share article