React Redux
Redux(리덕스)란 JavaScript(자바스트립트) 상태관리 라이브러리이다.
Redux(리덕스)의 본질은 Node.js 모듈이다.
컴포넌트 간의 상태 공유와 상태 업데이트를 효율적으로 처리할 수 있게 합니다.
❗️Redux의 기본 개념 : 세 가지 원칙
🧺 Store (스토어)
애플리케이션의 전체 상태를 저장하고 관리하는 객체입니다. 리덕스의 중앙 상태 저장소로써, 애플리케이션의 모든 상태와 상태 변화를 담당합니다. 스토어는 리듀서와 초기 상태(initial state)를 인자로 받아 생성됩니다.
📃 Action (액션) (주문서)
액션은 상태 변화의 요청을 나타내는 객체입니다. 이벤트가 발생하거나 사용자 입력을 받아 상태 변화가 필요할 때, 리덕스에서는 액션을 디스패치(dispatch)하여 상태 변화를 시작합니다. 액션 객체는 type 속성을 필수적으로 가지고 있으며, 필요에 따라 추가적인 데이터(payload)를 포함할 수 있습니다
🎉 Reducer (리듀서)
리듀서는 액션에 따라 상태를 어떻게 업데이트할지를 정의하는 순수 함수입니다. 리듀서는 현재 상태와 액션 객체를 인자로 받아 새로운 상태를 반환합니다. Redux에서는 모든 상태 변경은 리듀서 함수를 통해 이루어집니다.
🚩활용 순서
1) 설치 및 설정
먼저, 리액트 프로젝트에 Redux를 설치하고 설정합니다.
npm install redux react-redux
2) 액션 정의
// actions.js
export const ADD_TODO = 'ADD_TODO';
export const addTodo = (text) => {
return {
type: ADD_TODO,
payload: text,
};
};
3) 리듀서 작성
리듀서는 액션에 따라 상태를 업데이트하는 함수입니다. 초기 상태와 액션에 따른 상태 변화를 정의합니다.
// reducer.js
import { ADD_TODO } from './actions';
const initialState = {
todos: [],
};
const todoReducer = (state = initialState, action) => {
switch (action.type) {
case ADD_TODO:
return {
...state,
todos: [...state.todos, action.payload],
};
default:
return state;
}
};
export default todoReducer;
4) 스토어 생성
스토어를 생성하고 리듀서를 등록합니다.
// store.js
import { createStore } from 'redux';
import todoReducer from './reducer';
const store = createStore(todoReducer);
export default store;
5)애플리케이션에 스토어 연결
react-redux의 Provider 컴포넌트를 사용해 애플리케이션에 스토어를 연결합니다.
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import store from './store';
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
// App02.js
import React, { useState } from "react";
import { createStore } from "redux";
import { Provider, useSelector, useDispatch } from "react-redux";
// 리듀서 함수
function reducer(currentState, action) {
if (currentState === undefined) {
return {
isSignIn: false,
};
}
const newState = { ...currentState };
if (action.type === "SignIn") {
newState.isSignIn = true;
newState.userName = action.userName;
}
return newState;
}
// 리덕스 스토어 생성
const store = createStore(reducer);
// 애플리케이션 컴포넌트
export default function App() {
return (
<div>
<h1>아주아주 멋진 웹 서비스입니다. 로그인 필수!</h1>
<div>
{/* Redux Provider로 스토어 전달 */}
<Provider store={store}>
<Form></Form>
<Service />
</Provider>
</div>
</div>
);
}
// 로그인 폼 컴포넌트
const Form = () => {
const dispatch = useDispatch();
return (
<form
onSubmit={(e) => {
e.preventDefault();
// 액션 디스패치로 상태 변경
dispatch({
type: "SignIn",
userName: e.target.userName.value,
});
}}>
<input name="userName" placeholder="사용자 이름을 입력하세요" />
<button type="submit">Sign In</button>
</form>
);
};
// 서비스 컴포넌트
const Service = () => {
// useSelector를 통해 스토어 상태 접근
const userName = useSelector((state) => state.userName);
return (
<>
{userName ? (
<p>{userName}님! 환영합니다!</p>
) : (
<p>로그인 후 이용할 수 있습니다</p>
)}
</>
);
};
리덕스를 사용하여 간단한 로그인 상태 관리와 표시하는 예제이다.
reducer 함수: 리덕스에서 상태 변화를 다루는 함수. 초기 상태를 정의하고, "SignIn" 액션이 발생하면 상태를 업데이트
store 생성: createStore 함수를 사용하여 리듀서로부터 스토어를 생성
App 컴포넌트: 리덕스 Provider로 스토어를 감싸 하위 컴포넌트에서 상태를 사용할 수 있게 한다.
Form 컴포넌트: 로그인 폼을 나타내는 컴포넌트. 폼을 제출하면 dispatch 함수를 사용하여 "SignIn" 액션을 발생.
Service 컴포넌트: 로그인 상태에 따라 환영 메시지 또는 로그인 안내 메시지를 표시하는 컴포넌트. useSelector를 사용하여 스토어 상태를 가져온다.
