[React] 스토어(Store)

Jul 13, 2024

Contents

1. 스토어(Store)란?2. 로그인 페이지 만들기 3. Reducer store 사용하기

1. 스토어(Store)란?

💡

스토어(Store)는 애플리케이션의 전역 상태(state)를 저장하고 관리하는 객체를 의미한다. 스토어를 사용하면 애플리케이션의 다양한 컴포넌트가 공통된 상태를 쉽게 공유하고, 상태 변경 시 일관된 방식으로 반응하도록 할 수 있다. createStore 함수를 사용하여 스토어를 생성한다.

[React] Redux 상태 관리 - {CODE-RYU};

React

https://inblog.ai/coderyu1/react-redux-상태-관리-23594?traffic_type=internal

위의 블로그에서 상태관리 관련 내용을 볼 수 있다.

2. 로그인 페이지 만들기

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;

App.js 에 링크를 추가한다.

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;

3. 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 React from "react";
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 등록해야 한다.

isLogin 상태가 true 일 때

isLogin 상태가 false 일 때

See more posts

[React] 스토어(Store)

1. 스토어(Store)란?

2. 로그인 페이지 만들기

3. Reducer store 사용하기

More articles

[Docker] 도커(Docker)란?

[React] 서버와 통신하기

[React] 라우터(Router)

[React] Redux 상태 관리