Gaon12: 시작

2024-11-30T03:17:36Z

시작

새 문서

== 개요 ==
'''리덕스(Redux)'''는 자바스크립트 애플리케이션의 상태 관리를 위한 라이브러리로, 주로 [[리액트]]와 함께 사용된다. 애플리케이션의 상태를 예측 가능하고 일관되게 관리할 수 있도록 돕는다. [[2015년]]에 [[댄 아브라모프]](Dan Abramov)와 [[앤드류 클라크]](Andrew Clark)가 개발하였다. [[Flux]] 아키텍처에서 영감을 받아 설계되었으며, 단방향 데이터 흐름과 불변성(immutability)을 기본 철학으로 삼고 있다.

Redux는 주로 복잡한 상태 관리를 필요로 하는 대규모 애플리케이션에서 유용하게 사용되지만, 간단한 프로젝트에서는 상대적으로 과한 선택지가 될 수 있다는 평가를 받기도 한다.

== 주요 개념 ==
Redux는 [[Flux]]의 핵심 개념을 단순화하고 구조화하여 다음 세 가지 주요 원칙을 기반으로 작동한다.
* '''단일 상태 트리(Single Source of Truth)''': 애플리케이션의 모든 상태는 하나의 객체 트리로 저장되며, 이를 '스토어(Store)'라 부른다.
* '''읽기 전용 상태(Read-Only State)''': 상태를 변경하려면 반드시 액션(Action)을 통해야 한다. 이를 통해 상태 변경의 추적 가능성을 높인다.
* '''순수 함수로 상태 변경(Pure Functions)''': 상태 변경 로직은 순수 함수인 리듀서(Reducer)를 통해 이루어진다. 리듀서는 이전 상태와 액션을 입력으로 받아 새로운 상태를 반환한다.

== 주요 구성 요소 ==
* '''스토어(Store)''': 애플리케이션의 상태를 보관하며, 상태를 읽거나 변경하기 위한 인터페이스를 제공한다.
* '''액션(Action)''': 상태 변경을 지시하는 객체로, `type` 속성을 반드시 포함해야 한다.
* '''리듀서(Reducer)''': 액션의 지시에 따라 새로운 상태를 반환하는 순수 함수이다.
* '''미들웨어(Middleware)''': 액션이 리듀서에 도달하기 전에 추가적인 로직을 수행할 수 있도록 돕는 도구이다. 예: [[redux-thunk]], [[redux-saga]].

== 사용법 ==
Redux를 사용하는 기본적인 과정은 다음과 같다:
# '''스토어 생성''': `createStore` 함수를 사용하여 스토어를 생성한다.
# '''리듀서 정의''': 상태 변경 로직을 정의한다.
# '''액션 디스패치''': `dispatch` 메서드를 사용하여 액션을 스토어에 전달한다.
# '''상태 구독''': `subscribe` 메서드를 사용하여 상태 변경을 감지하고 UI를 업데이트한다.

<syntaxhighlight lang="javascript">
import { createStore } from 'redux';

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

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

// 액션 디스패치
store.dispatch({ type: 'INCREMENT' });
console.log(store.getState()); // { count: 1 }
</syntaxhighlight>

== 장단점 ==
=== 장점 ===
* 상태 관리가 명확하고 예측 가능하다.
* 대규모 애플리케이션에서 상태 관리 로직을 체계적으로 구성할 수 있다.
* [[React DevTools]] 및 [[Redux DevTools]]와 같은 디버깅 도구를 통해 상태 추적이 용이하다.

=== 단점 ===
* 간단한 애플리케이션에서는 설정 및 사용이 과도하게 복잡할 수 있다.
* 상태 변경이 리듀서를 거쳐야 하므로 코드량이 늘어날 수 있다.
* [[Context API]] 등의 대안이 등장하면서 간단한 상태 관리에서는 사용 빈도가 줄어드는 추세이다.

== 기타 ==
* Redux는 상태 관리를 위한 공식적인 표준이 아니며, 꼭 리액트에서만 사용해야 하는 것은 아니다. [[Vue]], [[Angular]] 등에서도 사용할 수 있다.
* 댄 아브라모프는 2019년 이후 "리덕스가 모든 프로젝트에 적합하지 않으며, 간단한 프로젝트에서는 [[Context API]]로도 충분하다"는 입장을 밝힌 바 있다.
* Redux Toolkit이 등장하면서 기존의 복잡한 설정 과정을 단순화하여 더욱 쉽게 사용할 수 있게 되었다.

== 참고 자료 ==
[https://redux.js.org Redux 공식 문서]


[[분류:웹 프레임워크]] [[분류:리액트]]

Redux - 편집 역사

Gaon12: 시작