6. Redux (Store)

박선규

Jul 15, 2025

Contents

Store 로그인 페이지 만들기 App.js Reducer store 사용

Store

📌

Redux에서 애플리케이션의 전체 상태(state)를 보관하는 객체

createStore() 또는 configureStore() 함수를 사용하여 생성함

스토어는 상태를 보관하고, 상태를 읽고, 상태를 변경하는 흐름의 중심 역할을 함

4. Redux 상태관리(구조분해할당,useState,props)

로그인 페이지 만들기

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 등록해야 한다.

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;

import React from 'react'; function LoginComplete(props) { return ( <div> <h1>Login 완료</h1> <h2>store isLogin : true</h2> </div> ); } export default LoginComplete;

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;

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;

npm install @reduxjs/toolkit react-redux // @reduxjs/toolkit 와 react-redux 를 동시에 설치하는 코드 // react-redux 는 상태관리를 위한 라이브러리 //@reduxjs/toolkit 는 react-redux를 쉽게 사용할 수 있는 도구

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;

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;

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;

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> );