[TIL] Redux

신재욱·2023년 7월 3일

<웅진X유데미-스나이퍼팩토리 프론트엔드(React)>

목록 보기

5/5

📒 오늘 공부한 내용

리덕스(Redux)는 JavaScript 애플리케이션의 상태 관리를 위한 예측 가능한(state predictable) 컨테이너 상태 관리 패턴과 라이브러리다. 리덕스는 주로 React와 함께 사용되며, React 외에도 Angular, Vue 등 다른 프레임워크와도 함께 사용할 수 있다.

리덕스(Redux)의 주요 목표는 애플리케이션의 상태 변화를 예측 가능하고 디버깅하기 쉽게 만들어 개발자들이 복잡한 상태 관리를 간편하게 할 수 있도록 하는 것이다. 상태를 중앙 집중화하여 관리함으로써 다양한 컴포넌트 간에 상태 공유가 가능하고, 애플리케이션의 복잡성을 줄일 수 있다.

✅ 스토어(Store)

애플리케이션의 상태를 저장하는 객체, 리덕스 스토어는 애플리케이션의 상태를 단일 소스로 유지한다.

import { createStore } from 'redux';

// 초기 상태 정의
const initialState = {
  count: 0,
};

// 리듀서 함수 정의
function reducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return {
        ...state,
        count: state.count + 1,
      };
    case 'DECREMENT':
      return {
        ...state,
        count: state.count - 1,
      };
    default:
      return state;
  }
}

// 스토어 생성
const store = createStore(reducer);

✅ 액션(Action)

상태를 변경하기 위한 정보를 나타내는 객체, 액션은 반드시 type 필드를 가지고 있어야 하며, 필요에 따라 다른 데이터를 포함할 수도 있다.

// 액션 타입 정의
const INCREMENT = 'INCREMENT';
const DECREMENT = 'DECREMENT';

// 액션 생성 함수 정의
function increment() {
  return { type: INCREMENT };
}

function decrement() {
  return { type: DECREMENT };
}

// 디스패치 예제
store.dispatch(increment());
store.dispatch(decrement());

✅ 리듀서(Reducer)

액션과 이전 상태를 받아 새로운 상태를 반환하는 순수한 함수, 리듀서는 애플리케이션의 상태를 변경하는 로직이 포함되어 있다.

function reducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return {
        ...state,
        count: state.count + 1,
      };
    case 'DECREMENT':
      return {
        ...state,
        count: state.count - 1,
      };
    default:
      return state;
  }
}

✅ 선택자(Selector)

상태에서 필요한 데이터를 추출하는 함수, 선택자를 사용하여 필요한 데이터를 쉽게 가져올 수 있다.

// 상태에서 필요한 데이터를 추출하는 선택자 함수
function getCount(state) {
  return state.count;
}

// 선택자 사용 예제
const currentState = store.getState();
const currentCount = getCount(currentState);
console.log(currentCount); // 상태에서 추출한 count 값 출력

✅ React redux 사용법

◾ store.js 생성

◾store.js

Action 만들기

export const plusStr = () => ({ type: "PLUS", str: "helloWorld" });

상태 객체 만들기

const initState = {
  str: "안녕하세요",
};

reducer 만들기

export const reducer = (state = initState, action) => {
  switch (action.type) {
    case "PLUS":
      return { str: state.str + state.str };
    default:
      return state;
  }
};

◾_app.js에서 Redux설정

import { Provider } from "react-redux";
import { createStore } from "redux";
import reducer from "../src/commons/store"; // 리듀서 파일 경로

import Layout from "../src/commons/Layout/index";
import "../styles/globals.css";

// 루트 리듀서로 스토어 생성
const store = createStore(reducer);

export default function App({ Component, pageProps }) {
  return (
    <Provider store={store}>
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </Provider>
  );
}

◾ useSelector 함수를 사용

import Head from "next/head";
import { useSelector } from "react-redux";

export default function GraphqlMutationPage() {
  const str = useSelector((store) => store.str);
  return (
    <>
      <Head>
        <title>Redux</title>
      </Head>
      <h1>{str}</h1>
    </>
  );
}

◾ 초기화면

✅ 리덕스(Redux)와 리코일(Recoil)

◾ 설계 철학

리덕스 : Flux 아키텍처의 구현체 중 하나로, 단방향 데이터 흐름을 따른다. 액션(Action)을 통해 상태를 변경하고, 변경된 상태를 컴포넌트에게 전달하여 업데이트하는 패턴이다.

리코일 : React 팀에서 개발한 상태 관리 라이브러리로, Recoil은 단방향 데이터 흐름 대신, 양방향 데이터 흐름을 지향한다. 상태를 읽고 쓰는 것이 더 자연스럽고 간단하게 이루어진다.

◾ API 및 문법

리덕스 : Redux는 많은 중간웨어와 미들웨어를 활용하여 데이터의 비동기적인 흐름을 관리할 수 있다. 또한, 상태의 변경을 위해 액션과 리듀서(reducer)를 사용하는 별도의 개념이 있다.

리코일 : Recoil은 React Hook을 사용하여 간편한 상태 관리를 제공한다. 액션과 리듀서 개념이 없으며, 컴포넌트에서 직접 상태를 읽고 쓰는 것이 가능하다.

◾ 적용의 용이성

리덕스 : 리덕스는 약간의 학습 곡선이 있으며, 초기 구성 및 설정이 더 복잡할 수 있다. 더 큰 규모의 애플리케이션에 적합하다고 알려져 있다.

리코일 : Recoil은 훨씬 간단한 API를 제공하며, React 생태계와 자연스럽게 통합된다. 초기 설정이 더 쉽고 간단하며, 상대적으로 작은 규모의 애플리케이션에 적합하다.

✍ 알게된 점 / 과제

📝 실습

store.js

import { createStore, combineReducers } from "redux";

// Action 생성 함수
export const setLoggedIn = () => {
  return {
    type: "SET_LOGGED_IN",
  };
};

export const setLoggedOut = () => {
  return {
    type: "SET_LOGGED_OUT",
  };
};

export const setCountUp = () => {
  return {
    type: "SET_COUNT_UP",
  };
};

export const setCountDown = () => {
  return {
    type: "SET_COUNT_DOWN",
  };
};

// 로그인 상태를 관리하는 Reducer
const authReducer = (state = { isLoggedIn: false }, action) => {
  switch (action.type) {
    case "SET_LOGGED_IN":
      return {
        ...state,
        isLoggedIn: true,
      };
    case "SET_LOGGED_OUT":
      return {
        ...state,
        isLoggedIn: false,
      };
    default:
      return state;
  }
};

const counter = (count = { isCounter: 0 }, action) => {
  switch (action.type) {
    case "SET_COUNT_UP":
      return {
        ...count,
        isCounter: count.isCounter + 1,
      };
    case "SET_COUNT_DOWN":
      return {
        ...count,
        isCounter: count.isCounter - 1,
      };
    default:
      return count;
  }
};

// 리듀서들을 합침
const rootReducer = combineReducers({
  auth: authReducer,
  counter: counter,
});

// 스토어 생성
const store = createStore(rootReducer);

export default store;

index.jsx

import React from "react";
import { connect } from "react-redux";
import {
  setLoggedIn,
  setLoggedOut,
  setCountUp,
  setCountDown,
} from "../../commons/store";
import { useSelector, useDispatch } from "react-redux";
import styled from "@emotion/styled";

const Container = styled.div`
  max-width: 500px;
  margin: 100px auto;
  text-align: center;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
`;

const Title = styled.h1`
  font-size: 24px;
  text-align: center;
`;

const Button = styled.button`
  margin-right: 10px;
  padding: 10px 20px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-top: 20px;

  &:hover {
    background-color: #45a049;
  }
`;

const SomeComponent = () => {
  const isLoggedIn = useSelector((state) => state.isLoggedIn);
  const isCounter = useSelector((count) => count.isCounter);

  const aa = useDispatch();
  const bb = useDispatch();
  const handleButtonClick = () => {
    aa(setLoggedIn()); // 로그인 액션 디스패치
  };

  const handleButtonClick2 = () => {
    aa(setLoggedOut()); // 로그아웃 액션 디스패치
  };

  const handleButtonClick3 = () => {
    bb(setCountUp());
  };

  const handleButtonClick4 = () => {
    bb(setCountDown());
  };

  const { auth, counter } = useSelector((aaa) => aaa); // aaa에 어떤 값이 들어와도 상관X
  return (
    <>
      <Container>
        <Title>로그인 상태 : {auth.isLoggedIn ? "Yes" : "No"}</Title>
        <Button onClick={handleButtonClick}>로그인</Button>
        <Button onClick={handleButtonClick2}>로그아웃</Button>
      </Container>
      <Container>
        <Title>카운터 : {counter.isCounter}</Title>
        <Button onClick={handleButtonClick3}>증가</Button>
        <Button onClick={handleButtonClick4}>감소</Button>
      </Container>
    </>
  );
};
export default SomeComponent;

신재욱

1년차 프론트엔드 개발자

이전 포스트