[Redux] Store

 

 

 목차 

1. Redux Store란?
2. Store와 데이터
3. Store의 역할
4. Store의 특징
5. Store의 구성 요소
6. Store의 생성 방법
7. Store의 사용법 (핵심 메서드)
8. Store의 중요성

 

 

Redux의 Store에 대해서 알아보자!

 

---

 

 

 1 . Redux Store란? 

 

store: 저장하다, 보관하다.

store은 Redux의 데이터들을 저장하기 위한 저장소이다.

Store를 통해 애플리케이션에서 사용되는 모든 상태를 하나의 객체로 관리하며,  상태를 효율적이고 예측 가능하게 다룰 수 있다.

그러나 여기서 오해하면 안되는 것이, Redux Store의 데이터들은 실제로 저장장치에 저장되는 것이 아니다.

아래에서 자세히 살펴보자.

 

 

---

 

 

 2. Store와 데이터 

 

• State management : 상태를 보관하는게 아니라 관리하는것 

• State persistence: 상태를 저장하고 지속시키는 것 

 

Redux는 위에서 State management에 해당한다.

그렇다면 Redux Store는 데이터를 어떻게 관리할까?

Redux Store는 자바스크립트 변수를 통해 데이터를 관리한다.

자바스크립트의 변수들은 메모리에 올라가게 되는데, 이 메모리는 휘발성이기 때문에 전원이 꺼지거나, 프로그램이 다시 시작되면 이전 데이터는 모두 날아가고 초기화된다. 

Redux 역시 웹브라우저를 새로고침하거나 컴퓨터를 재부팅하면 데이터가 모두 날아간다.

Redux를 사용하다보면 분명 store에 데이터를 넣었는데 어느 순간 초기화가 돼있는 것을 발견하게 될 것이다.

 

 

 Redux State Tree 

 

Redux store의 데이터들은 트리형태로 저장된다.

그리고 Redux의 3가지 원칙 중 첫번째 원칙인 Single Source of Truth에 따라 이러한 State Tree는 단 하나만 존재한다.

하나의 트리의 계층구조로 각각 state들이 들어있는 것이다. 

 

 

---

 

 

 3. Store의 역할 

 

• 상태 저장 : 애플리케이션의 모든 상태(State)를 저장한다. 상태는 단순한 객체 형태로 유지된다.

 

• 상태 업데이트 : 상태는 직접 수정할 수 없으며, 오직 Action과 Reducer를 통해서만 업데이트된다. 이로 인해 상태 변화의 흐름이 명확하고 디버깅이 쉬워진다.

 

• 구독 관리 : 상태가 변경될 때 이를 감지하고 필요한 동작(예: UI 업데이트)을 수행하도록 구독(Subscription)을 지원한다.

 

 

---

 

 

 4. Store의 특징 

 

• 단일성 : 애플리케이션당 하나의 Store를 가지며, 모든 상태를 이 Store에서 관리한다.

• 읽기 전용 상태 : 상태는 직접 수정되지 않으며, action을 통해 업데이트된다.

• 순수 함수로 상태 관리 : 상태 업데이트는 Reducer라는 순수 함수를 통해 이루어진다.

 

 

---

 

 

 5. Store의 구성 요소 

 

• State: 애플리케이션의 현재 상태를 나타내는 데이터이다.

• Reducer: State를 업데이트하는 순수 함수입니다. Action 객체를 받아 상태를 변경한다.

• Action: 상태 변경을 설명하는 객체로, type과 필요에 따라 추가 데이터를 포함한다.

 

 

---

 

 

 5. Store 생성 방법 

 

Redux의 createStore 메서드를 사용하여 Store를 생성할 수 있다.

 

• createStore(): Store를 생성하는 역할을 하는 함수이다. 리덕스 Store에는 리덕스에서 관리하는 모든 상태값이 들어간다.

 

createStore(rootReducer, [preloadedState], [enhancer]) 

 

< parameter >

 

• rootReducer : 여러 Reducer들을 합쳐서 하나로 만든 것을 rootReducer라고 하는데, createStore() 함수의 첫 번째 파라미터로 이 rootReducer가 들어간다.

• preloadedState (선택사항) : 초기 상태값(preloadedState)이 들어간다.

• enhancer (선택사항)  : 여기에 리덕스 Store의 기능을 향상시켜주는 역할을 하는 함수들이 들어가게 된다.
이러한 역할을 하는 함수를 middleware라고 부른다.

 

 

---

 

 

 

 6. Store 사용법 (핵심 메서드) 

 

• getState(): 현재 상태를 반환한다.

store.getState();

 

 

• dispatch(action): 상태를 업데이트하기 위해 Action을 Reducer로 전달한다.

store.dispatch({ type: 'INCREMENT' });

 

 

• subscribe(listener): 상태 변경 시 실행될 리스너를 등록한다.

const unsubscribe = store.subscribe(() => {
  console.log('State updated:', store.getState());
});

// 구독 취소
unsubscribe();

 

 

---

 

 

 7. Store의 중요성 

 

Store는 Redux의 핵심이며, 애플리케이션 상태를 중앙에서 관리할 수 있게 해준다. 이를 통해 상태를 추적하기 쉽고, 대규모 애플리케이션에서도 예측 가능한 방식으로 동작할 수 있다.