Redux

---

리액트에서 상태를 관리하기 위한 상태관리 라이브러리

Redux를 사용하면 전역 상태를 관리할 수 있고, 이는 여러 컴포넌트에서 사용되는 데이터를 쉽게 공유하고 업데이트 할 수 있도록 해준다.

Redux의 핵심 개념

1. store : 애플리케이션의 전역 상태를 저장하는 객체

• 컴포넌트와는 별개로 스토어라는 공간이 있어서 그 스토어 안에 앱에서 필요한 상태를 담는다.
• 컴포넌트에서 상태 정보가 필요할 때 스토어에 접근한다.

2. reducer : action에 따라 상태를 어떻게 업데이트 할지 정의하는 순수함수

• action을 store에 바로 전달하는 것이 아닌, reducer에 전달해야 한다.
• reducer가 action을 보고 store의 상태를 업데이트 하는 것
• action을 reducer에 전달하기 위해서는 dispatch() 메서드를 사용해야 한다.

3. action : 상태를 업데이트 하기 위한 객체

• action은 앱에서 스토어에 운반할 데이터를 말한다.
• action은 자바스크립트 객체 형식으로 되어 있다.

4. dispatch : store의 내장 함수 중 하나

• action을 발생시킨다.
• action을 파라미터로 전달하고 reducer를 호출한다.

Redux의 3대 원칙

1. Single source of truth

• 동일한 데이터는 항상 같은 곳에서 가져온다.
• 스토어는 하나 뿐인 데이터 공강에 있다는 의미

2. State is read-only

• 리액트에서는 setState 메소드를 사용해야만 상태 변경이 가능하다.
• 리덕스에서도 액션이라는 객체를 통해서만 상태를 변경할 수 있다.

3. Changes are made with pure functions

• 변경은 순수함수로만 가능하다.
• 이는 리듀서와 연관되는 개념
• Store - Action - Reducer

Redux 사용 방법

1. 상태가 변경되어야 하는 이벤트가 발생했을 때, 변경될 상태에 대한 정보가 담긴 Action 객체가 생성된다.

const increaseCountAction = {
 type: 'INCREASE_COUNT',
 patload: 1
}

2. Action 객체가 Dispatch 함수의 인자로 전달된다.

dispatch(increaseCountAction);

3. Dispatch 함수는 Action 객체를 Reducer 함수로 전달해준다.

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREASE_COUNT':
      return {
        ...state,
        count: state.count + action.payload
      };
    default:
      return state;
  }
};

4. Reducer 함수는 Action 객체의 값을 확인하고, 그 값에 따라 전역 상태 저장소 store의 상태를 변경한다.

const store = createStore(reducer);

5. 상태가 변경되면 화면에 다시 렌더링 한다.

const Counter = () =>{
const count = useSelector(state => state.count);
const dispatch = useDispatch();

const handleIncrement = () =>{
 dispatch (increaseCountAction);
}

return (
 <div>
 <p>Count :{count}</p>
 <button onClick ={handleIncrement}>+</button>
 </div>
)
}

Redux의 장단점

장점

• 순수 함수를 사용해 상태를 예측 가능하게 만든다.
• 유지 보수에 용이하다.
• redux dev tool이 있어 디버깅이 쉽다.
• 비동기를 지원하는 redux saga, redux thunk 등의 다양한 미들웨어가 존재한다.
• 중앙 집중식 상태 관리 방식이기 때문에 상태 공유가 쉽고, 복잡한 컴포넌트 계층 구조에서도 상태를 쉽게 전달할 수 있다.
• 큰 커뮤니티와 광범위한 생태계를 가지고 있어 다양한 리소스와 라이브러리를 쉽게 찾을 수 있다.

단점

• 설정과 사용을 위해 많은 초기 설정을 요구한다.
• 작은 프로젝트나 간단한 상태관리에는 과도할 수 있다.
• 초보자가 사용하기에는 러닝 커브가 길다.
• 라이브러리와 결합해 사용하는 경우 호환성 문제나 종속성 관리가 필요할 수 있다.
• 큰 규모의 프로젝트에서 모든상태를 한 스토어에 저장하면 성능 문제가 발생할 수 있다.

Redux를 사용하는 이유

• 예측 가능한 상태 관리
• 중앙 집중식 상태 관리
• 디버깅 및 개발 도구 지원
• 유지 보수성 및 코드 구조화
• 미들웨어 지원
• 일관된 상태 및 데이터 흐름
• 커뮤니티와 생태계
• 성능 최적화
• 유니버셜 애플리케이션 지원

Redux를 언제 사용하면 좋을까?

• 전역 상태가 필요하다고 느껴질 때
• 상태들이 자주 업데이트 될 때
• 상태를 업데이트 하는 로직이 복잡할 때
• 앱이 크고 많은 사람들에 의해 코드가 관리될 때
• 상태가 업데이트되는 시점을 관찰할 필요가 있을 때