이 페이지는 PageTurner AI로 번역되었습니다(베타). 프로젝트 공식 승인을 받지 않았습니다. 오류를 발견하셨나요? 문제 신고 →
용어집
이 문서는 Redux의 핵심 용어와 해당 타입 시그니처를 설명하는 용어집입니다. 타입은 Flow 표기법으로 문서화되었습니다.
상태(State)
type State = any
상태(또는 상태 트리)는 광범위한 용어이지만, Redux API에서는 일반적으로 스토어가 관리하고 getState()로 반환되는 단일 상태 값을 의미합니다. 이는 종종 깊게 중첩된 객체인 Redux 애플리케이션의 전체 상태를 나타냅니다.
관례적으로 최상위 상태는 객체나 Map 같은 키-값 컬렉션이지만, 기술적으로는 모든 타입이 가능합니다. 그래도 상태를 직렬화 가능하게 유지하기 위해 최선을 다해야 합니다. JSON으로 쉽게 변환할 수 없는 것은 상태에 포함하지 마세요.
액션(Action)
type Action = Object
_액션_은 상태 변경 의도를 나타내는 평범한 객체입니다. 액션은 스토어에 데이터를 전달하는 유일한 방법입니다. UI 이벤트, 네트워크 콜백, WebSockets 같은 기타 소스의 모든 데이터는 최종적으로 액션으로 디스패치되어야 합니다.
액션은 수행되는 액션 유형을 나타내는 type 필드가 반드시 있어야 합니다. 타입은 상수로 정의하고 다른 모듈에서 가져올 수 있습니다. type에는 Symbols보다 문자열을 사용하는 것이 좋습니다. 문자열이 직렬화 가능하기 때문입니다.
type 외에 액션 객체의 구조는 완전히 자유롭게 정의할 수 있습니다. 관심이 있다면 액션 구성 방법에 대한 권장 사항을 확인하려면 Flux Standard Action을 참조하세요.
아래 비동기 액션도 참조하세요.
리듀서(Reducer)
type Reducer<S, A> = (state: S, action: A) => S
_리듀서_는 누적 값과 현재 값을 받아 새로운 누적 값을 반환하는 함수입니다. 값들의 컬렉션을 단일 값으로 줄이는 데 사용됩니다.
리듀서는 Redux에만 국한된 개념이 아닙니다. 함수형 프로그래밍의 핵심 개념입니다. JavaScript 같은 대부분의 비함수형 언어에도 리듀싱을 위한 내장 API가 있습니다. JavaScript에서는 Array.prototype.reduce()입니다.
Redux에서 누적 값은 상태 객체이며, 누적되는 값들은 액션입니다. 리듀서는 이전 상태와 액션을 기반으로 새 상태를 계산합니다. 리듀서는 _순수 함수_여야 합니다. 즉, 동일한 입력에 대해 항상 동일한 출력을 반환해야 합니다. 또한 부수 효과(side-effect)가 없어야 합니다. 이 원칙 덕분에 핫 리로딩과 시간 여행 같은 강력한 기능이 가능해집니다.
리듀서는 Redux에서 가장 중요한 개념입니다.
리듀서 내부에 API 호출을 배치하지 마세요.
디스패치 함수(Dispatching Function)
type BaseDispatch = (a: Action) => Action
type Dispatch = (a: Action | AsyncAction) => any
_디스패치 함수_는 액션이나 비동기 액션을 받아들이고, 하나 이상의 액션을 스토어에 디스패치할 수도 있고 안 할 수도 있는 함수입니다.
일반적인 디스패치 함수와 미들웨어 없이 스토어 인스턴스가 제공하는 기본 dispatch 함수를 구분해야 합니다.
기본 디스패치 함수는 항상 동기적으로 액션을 스토어의 리듀서로 전송하며, 스토어에서 반환된 이전 상태와 함께 새 상태를 계산합니다. 이 함수는 리듀서가 소비할 준비가 된 평범한 객체 형태의 액션을 기대합니다.
미들웨어는 기본 디스패치 함수를 래핑합니다. 이를 통해 디스패치 함수가 액션 외에 비동기 액션도 처리할 수 있게 됩니다. 미들웨어는 액션이나 비동기 액션을 다음 미들웨어로 전달하기 전에 변환, 지연, 무시 또는 해석할 수 있습니다. 자세한 내용은 아래를 참조하세요.
액션 생성자(Action Creator)
type ActionCreator<A, P extends any[] = any[]> = (...args: P) => Action | AsyncAction
_액션 생성자(Action creator)_는 말 그대로 액션을 생성하는 함수입니다. 두 용어를 혼동하지 마세요. 다시 강조하자면, 액션은 정보의 페이로드(payload)이며, 액션 생성자는 액션을 생성하는 팩토리(factory)입니다.
액션 생성자를 호출하면 액션만 생성될 뿐, 실제로 디스패치(dispatch)되지는 않습니다. 상태 변경을 발생시키려면 스토어의 dispatch 함수를 호출해야 합니다. 특정 스토어 인스턴스에 액션 생성 결과를 즉시 디스패치하는 함수를 _바운드 액션 생성자(bound action creator)_라고 부르기도 합니다.
액션 생성자에서 현재 상태를 읽거나 API 호출, 라우팅 전환 같은 사이드 이펙트가 필요하다면, 액션 대신 비동기 액션을 반환해야 합니다.
비동기 액션(Async Action)
type AsyncAction = any
_비동기 액션(Async action)_은 디스패치 함수에 전달되지만 리듀서에서 바로 소비될 준비가 되지 않은 값입니다. 미들웨어에 의해 액션(또는 일련의 액션들)으로 변환된 후 기본 dispatch() 함수로 전달됩니다. 비동기 액션은 사용하는 미들웨어에 따라 다양한 유형이 있을 수 있습니다. 일반적으로 Promise나 썽크(thunk) 같은 비동기 기본 요소로, 리듀서에 즉시 전달되지 않고 작업 완료 시 액션 디스패치를 트리거합니다.
미들웨어(Middleware)
type MiddlewareAPI = { dispatch: Dispatch, getState: () => State }
type Middleware = (api: MiddlewareAPI) => (next: Dispatch) => Dispatch
미들웨어는 디스패치 함수를 구성하여 새로운 디스패치 함수를 반환하는 고차 함수(higher-order function)입니다. 주로 비동기 액션을 일반 액션으로 변환합니다.
미들웨어는 함수 구성(function composition)을 통해 조합 가능합니다. 액션 로깅, 라우팅 같은 사이드 이펙트 수행, 비동기 API 호출을 일련의 동기 액션으로 변환하는 데 유용합니다.
미들웨어에 대한 자세한 내용은 applyMiddleware(...middlewares)를 참조하세요.
스토어
type Store = {
dispatch: Dispatch
getState: () => State
subscribe: (listener: () => void) => () => void
replaceReducer: (reducer: Reducer) => void
}
스토어(Store)는 애플리케이션의 상태 트리를 보유하는 객체입니다. 리듀서 수준에서 조합이 이루어지므로 Redux 앱에는 단일 스토어만 존재해야 합니다.
-
dispatch(action): 위에서 설명한 기본 디스패치 함수입니다. -
getState(): 스토어의 현재 상태를 반환합니다. -
subscribe(listener): 상태 변경 시 호출될 함수를 등록합니다. -
replaceReducer(nextReducer): 핫 리로딩(hot reloading)과 코드 분할(code splitting) 구현에 사용됩니다. 일반적으로 직접 사용할 일은 거의 없습니다.
자세한 내용은 전체 스토어 API 레퍼런스를 참조하세요.
스토어 생성자(Store creator)
type StoreCreator = (reducer: Reducer, preloadedState: ?State) => Store
스토어 생성자(Store creator)는 Redux 스토어를 생성하는 함수입니다. 디스패치 함수와 마찬가지로, Redux 패키지에서 내보내진 기본 스토어 생성자 createStore(reducer, preloadedState)와 스토어 강화자(store enhancer)에서 반환되는 스토어 생성자를 구분해야 합니다.
스토어 강화자(Store enhancer)
type StoreEnhancer = (next: StoreCreator) => StoreCreator
스토어 강화자(Store enhancer)는 스토어 생성자를 구성하여 새로운 강화된 스토어 생성자를 반환하는 고차 함수입니다. 미들웨어와 유사하게, 스토어 인터페이스를 조합 가능한 방식으로 변경할 수 있습니다.
스토어 강화자는 React의 고차 컴포넌트(Higher-Order Components)와 개념이 매우 유사하며, 때로 "컴포넌트 강화자(component enhancer)"라고도 불립니다.
스토어는 인스턴스가 아닌 함수들의 일반 객체 컬렉션이므로, 원본 스토어를 변경하지 않고도 쉽게 복사 및 수정할 수 있습니다. compose 문서에서 이를 보여주는 예제를 확인할 수 있습니다.
직접 스토어 강화자를 작성할 일은 거의 없지만, 개발자 도구에서 제공하는 것을 사용할 수 있습니다. 이는 애플리케이션이 인지하지 못한 상태에서 타임 트래블(time travel)을 가능하게 합니다. 흥미롭게도 Redux 미들웨어 구현체 자체도 스토어 강화자입니다.