찾다

집 >웹 프론트엔드 >JS 튜토리얼 >Redux 기본 마스터하기: React의 상태 관리에 대한 완벽한 가이드

Redux 기본 마스터하기: React의 상태 관리에 대한 완벽한 가이드

DDD
DDD원래의
2024-12-24 04:10:10789검색

Mastering Redux Basics: A Complete Guide to State Management in React

Redux 기본: 코드 예제를 통한 자세한 설명

Redux는 JavaScript 애플리케이션, 특히 React에서 널리 사용되는 상태 관리 라이브러리입니다. 앱 상태에 대한 중앙 집중식 저장소를 제공하므로 특히 크고 복잡한 애플리케이션에서 관리 및 디버그가 더 쉬워집니다. Redux는 단방향 데이터 흐름을 따르고 예측 가능한 방식으로 상태 변경이 발생하도록 보장하므로 앱 작동 방식을 더 쉽게 이해할 수 있습니다.

Redux 기본 사항을 단계별로 분석하여 각 개념을 코드 예제로 설명하겠습니다.

1. Redux란 무엇인가요?

Redux는 JavaScript 앱의 예측 가능한 상태 컨테이너입니다. 중앙 집중식으로 앱 상태를 관리하는 데 도움이 되므로 디버그 및 확장이 더 쉬워집니다.

Redux의 핵심 원칙:

  • 단일 정보 소스: 애플리케이션의 전체 상태가 단일 객체(스토어)에 저장되므로 쉽게 추적하고 조작할 수 있습니다.
  • 상태는 읽기 전용: 상태를 변경하는 유일한 방법은 액션을 전달하는 것입니다.
  • 순수 함수를 사용하여 변경: 상태는 작업에 대한 응답으로 상태가 어떻게 변경되는지 지정하는 순수 함수인 리듀서에 의해 수정됩니다.

2. Redux의 핵심 개념

Redux는 다음과 같은 주요 구성 요소를 사용합니다.

1. 액션

액션은 애플리케이션에서 발생한 이벤트나 작업을 설명하는 일반 JavaScript 개체입니다. 각 작업에는 수행 중인 작업을 설명하는 유형 속성이 있어야 합니다.

작업 예: 

// actions.js
export const increment = () => ({
  type: 'INCREMENT'
});

export const decrement = () => ({
  type: 'DECREMENT'
});
  • 여기서는 증가와 감소가 액션 생성자입니다. 유형 필드가 있는 작업 개체를 반환합니다. type 속성은 Redux에게 리듀서에서 작업을 처리하는 방법을 알려줍니다.

2. 감속기

리듀서는 현재 상태와 액션을 취한 다음 새 상태를 반환하는 순수 함수입니다. 리듀서는 작업에 대한 응답으로 상태가 어떻게 변경되어야 하는지를 지정하는 함수입니다. 순수 함수여야 합니다. 즉, 원래 상태를 수정하지 않고 새 상태 객체를 반환합니다.

리듀서 예시: 

// actions.js
export const increment = () => ({
  type: 'INCREMENT'
});

export const decrement = () => ({
  type: 'DECREMENT'
});
  • 위의 예에서:
    • 초기 상태는 개수 0으로 정의됩니다.
    • 감소기는 INCREMENT 및 DECREMENT 작업을 수신하고 그에 따라 카운트 상태를 업데이트합니다.
    • return { ...state, count: state.count 1 } 줄은 불변성을 유지하고 상태를 업데이트하기 위해 새 객체를 생성합니다.

3. 매장

스토어에는 애플리케이션의 전체 상태가 보관됩니다. 저장소는 Redux의 createStore 메소드를 사용하여 생성되며 애플리케이션의 상태가 존재하는 곳입니다. 스토어에서는 작업을 전달하고 상태 변경을 구독하는 메서드도 제공합니다.

매장 예시: 

// reducer.js
const initialState = {
  count: 0
};

const counterReducer = (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;
  }
};

export default counterReducer;
  • countReducer를 createStore에 전달하여 스토어를 생성합니다.
  • 이제 애플리케이션의 상태는 Redux에서 관리되며 상태에 대한 모든 변경 사항은 감속기를 거칩니다.

3. Redux를 React와 연결

React 구성요소는 상태 및 디스패치 작업을 가져오기 위해 Redux 스토어와 상호작용해야 합니다. React와 Redux를 연결하기 위해서는 별도의 라이브러리인 React-Redux를 사용합니다. 이는 스토어 상태에 액세스하기 위한 useSelector 및 작업 전달을 위한 useDispatch와 같은 후크를 제공합니다.

Redux를 React와 연결하는 단계:

  1. react-redux의 Provider 구성 요소로 앱을 래핑하여 스토어를 모든 구성 요소에 전달합니다.
  2. 상태에 액세스하려면 useSelector를 사용하세요.
  3. 상태를 수정하는 작업을 전달하려면 useDispatch를 사용하세요.

4. React 앱에서 Redux 설정

Redux를 간단한 React 앱과 연결하기 위한 전체 설정을 살펴보겠습니다.

1단계: Redux 및 React-Redux 설치

먼저 Redux와 React-Redux를 설치해야 합니다.

// store.js
import { createStore } from 'redux';
import counterReducer from './reducer';

const store = createStore(counterReducer);

export default store;

2단계: 작업 생성

Redux에서 액션은 상태에 적용하려는 변경 사항을 설명하는 일반 JavaScript 개체입니다.

npm install redux react-redux
  • 증가 및 감소 함수는 액션 객체를 반환하는 액션 생성자입니다.
  • 작업 개체에는 작업을 설명하는 유형 필드가 있습니다.

3단계: 리듀서 생성

리듀서는 현재 상태와 액션을 취해 새로운 상태를 반환하는 함수입니다.

// actions.js
export const increment = () => ({
  type: 'INCREMENT'
});

export const decrement = () => ({
  type: 'DECREMENT'
});
  • 리듀서는 INCREMENT 및 DECREMENT 작업을 수신하고 그에 따라 상태를 업데이트합니다.

4단계: 스토어 만들기

가게는 국가가 사는 곳이다. Redux의 createStore 메소드를 사용하여 생성됩니다.

// actions.js
export const increment = () => ({
  type: 'INCREMENT'
});

export const decrement = () => ({
  type: 'DECREMENT'
});
  • countReducer를 createStore에 전달하여 앱의 상태를 관리할 스토어를 생성합니다.

5단계: Redux와 React 연결

이제 Provider, useDispatch 및 useSelector 후크를 사용하여 Redux를 React 앱에 연결해 보겠습니다.

// reducer.js
const initialState = {
  count: 0
};

const counterReducer = (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;
  }
};

export default counterReducer;
  • 공급자: Redux 저장소를 모든 구성 요소에 전달하여 전체 애플리케이션을 래핑합니다.
  • useSelector: Redux 스토어에서 현재 상태(개수)를 검색합니다.
  • useDispatch: 작업(증가 및 감소)을 전달할 수 있습니다.

5. Redux 툴킷(선택 사항)

Redux를 더 쉽게 사용할 수 있도록 Redux Toolkit은 상용구 코드를 줄여 설정을 단순화합니다. createSlice 및configureStore와 같은 유틸리티를 제공하여 리듀서 생성 및 스토어 구성과 같은 일반적인 작업을 처리합니다.

Redux 툴킷 사용 예: 

// store.js
import { createStore } from 'redux';
import counterReducer from './reducer';

const store = createStore(counterReducer);

export default store;
  • createSlice 기능은 자동으로 액션 생성자와 감소기를 생성합니다.
  • configureStore는 매장 설정을 단순화합니다.

6. Redux 사용 모범 사례

  • Keep Redux for Global State: Redux를 사용하여 애플리케이션 전체 상태(예: 사용자 인증, 설정)를 관리합니다.
  • 간단한 구성 요소에 로컬 상태 사용: 더 작은 상태 요구(예: 양식 입력)의 경우 Redux 대신 React의 useState를 사용하세요.
  • 직접적 변이 방지: 불변성을 보장하기 위해 상태를 업데이트할 때 항상 새 객체를 반환합니다.

7. 결론

Redux는 React 애플리케이션에서 전역 상태를 관리하기 위한 강력한 도구입니다. 액션, 리듀서, 스토어를 이해하면 복잡한 상태를 예측 가능한 방식으로 관리할 수 있습니다. Redux Toolkit을 사용하면 이 프로세스를 더욱 단순화할 수 있습니다. Redux를 올바르게 사용하면 대규모 애플리케이션을 더 쉽게 관리, 디버그 및 확장할 수 있습니다.

이러한 지식을 바탕으로 이제 Redux를 React 애플리케이션에 통합하여 앱 전체에서 보다 효율적인 상태 관리를 보장할 수 있습니다.

위 내용은 Redux 기본 마스터하기: React의 상태 관리에 대한 완벽한 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript Object count for break using Property Event function this Access
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：JavaScript/jQuery를 사용하여 IFrame 콘텐츠에 어떻게 액세스하고 조작할 수 있습니까?다음 기사：JavaScript/jQuery를 사용하여 IFrame 콘텐츠에 어떻게 액세스하고 조작할 수 있습니까?

관련 기사

더보기