Redux 란?

1. Redux의 주요 개념

 
Redux는 Flex 아키텍쳐를 기반으로 설계되었으며, 단일 상태 관리(store)를 중심으로 동작한다.
 
1) Store

• 애플리케이션의 중앙 상태 저장소 이다.
• 상태는 하나의 store에 저장되며, 전역에서 접근 가능하다.
• 컴포넌트가 직접 상태를 변경할 수 없고, 상태 변경은 오직 Action과 Reducer를 통해 이루어진다.

 
2) Action

• 상태를 변경하기 위한 명령 객체이다.
• 액션 객체는 보통 type 속성을 가지며, 추가 데이터를 포함하기 위해 payload 속성을 가질 수 있다.

const action = { type: 'INCREMENT', payload: 1 };

 
 
3) Reducer

• 상태(state)와 Action을 입력받아 새로운 상태를 반환하는 순수 함수이다.
• 상태를 직접 수정하지 않고, 기존 상태를 기반으로 새 상태를 생성한다.

const initialState = {number:0};

export const numberReducer = (state=initialState, action) => {
  switch(action.type){
    case "INCREASE_NUMBER":
      return {...state, number:state.number + action.payload};
    default:
      return state;
  }
}

 
 
4) Dispatch

• dispatch는 Action을 store로 전달하는 함수이다.
• dispatch된 action은 reducer에서 처리되어 새로운 상태가 생성된다.

ex1)
store.dispatch({ type: 'INCREMENT' });
ex2)
const handleClick = (size) => {dispatch({type:"INCREASE_NUMBER", payload:size})}

 
 
5) Subscribe

• 상태가 변경될 때 실행할 콜백 함수를 등록한다.

store.subscribe(() => {
    console.log(store.getState());
});

 
 
 

2. Redux의 동작 흐름

1. 사용자가 특정 동작을 수행하면 Action이 생성된다.
2. dispatch(action)을 통해 action이 store에 전달된다.
3. Reducer가 호출되어 현재 상태와 액션을 기반으로 새로운 상태를 반환한다.
4. store는 새로운 상태를 업데이트하고, 등록된 Subscriber들에게 알린다.

 
 

3. Redux의 주요 특징

 

1. 단일 상태 트리 (Single Source of Truth) : 모든 상태를 하나의 중앙 저장소(Store)에서 관리하며, 이로인해 상태를 추적하고 디버깅하기 쉬워진다.
2. 불변성 (Immutability) : 상태는 직접 수정하지 않고, 새로운 상태 객체를 반환하며, 이는 버그를 줄이고 상태 변경을 예측 가능하게 만든다.
3. 예측 가능성 (Predictability) : 상태 변경 로직이 reducer 함수에 집중되므로 상태 흐름이 명확하다.
4. 디버깅 도구 지원 : Redux DevTools와 같은 강력한 디버깅 도구를 지원한다.

 
 

4. Redux를 사용하는 이유

• 컴포넌트가 많아지고 상태가 복잡해질 때, 상태를 효율적으로 관리할 수 있다.
• 상태 변경 로직이 집중화되어 유지보수와 테스트가 쉬워진다.
• 상태가 예측 가능하며 디버깅이 간편하다.

 
 

5. Redux 사용 예제

....~