[Redux] 상태관리 라이브러리 🗂

- 컴포넌트 코드로부터 상태 관리 코드를 분리할 수 있다.

 

- 미들웨어를 활용한 다양한 기능 추가

: 강력한 미들웨어 라이브러리(ex. redux-saga)

: 미들웨어에서 로컬 스토리지에 데이터 저장하기 및 불러오기

 

- SSG(서버 사이드 렌더링) 시 데이터 전달이 간편

: 리덕스의 상태값은 하나의 객체로 표현이 가능 -> 그 하나의 객체만 문자열로 변환해서 서버에서 클라이언트로 전달하면 되기 때문에 매우 간편

 

- 클라이언트는 받은 문자열을 하나의 객체로 만들어서 사용하면 됨

: 하나의 객체로 관리 가능하기 때문에 클라이언트에서 전체 애플리케이션의 상태를 저장해서 불러오는 기능도 간단하게 구현 가능

  과거의 상태를 저장했다가 과거의 상태로 돌아가는 것도 가능

 

- 리액트 콘텍스트보다 효율적인 렌더링 가능

---

1. 액션 (type 속성을 가지고 있는 객체)

dispatch 함수는 액션이 발생했다는 것을 리덕스에게 알려줌( -> 호출을 하면 스토어는 리듀서 함수를 실행시켜 해당 액션을 처리하는 로직이 있다면 액션을 참고하여 새로운 상태를 만들어 줌)

액션 구분을 위해 type 속성 값 사용 => 유니크 해야 함 (주로 /를 붙여 사용함)

store.dispatch({ type: 'todo/ADD', title: '영화 보기', priority: 'high' });
store.dispatch({ type: 'todo/REMOVE', id: 123 });
store.dispatch({ type: 'todo/REMOVE_ALL' });

 

액션 생성함수 (Action Creator)

=> 액션 객체 구조 일관성있게

=> 일종의 문서 역할을 함

export const ADD = 'todo/ADD';
export const REMOVE = 'todo/REMOVE';
export const REMOVE_ALL = 'todo/REMOVE_ALL';

export function addTodo({ title, priority }) {
  return { type: ADD, title, priority };
}
export function removeTodo({ id }) {
  return { type: REMOVE, id };
}
export function removeAllTodo() {
  return { type: REMOVE_ALL };
}

 

2. 미들웨어

next()로 다음 미들웨어 호출, 없으면 리듀서 호출

 

3. 리듀서

해당 액션에 의해 상태 값이 어떻게 변경되는지 로직을 담고 있음

출력은 새로운 상태 값

 

4. 스토어

리듀서가 알려준 새로운 상태값을 저장

스토어에 등록되어 있는 (데이터에 관심있는)옵저버에게 데이터 변경 사실 알려줌

( -> 정확히 말하면 데이터가 변경되지 않아도 액션이 발생하면 액션 처리가 끝났을 때 무조건 알려줌.

       주로 뷰에게 알려주고 그 이벤트를 받아 화면 갱신) 

 

 

 

 

실전 리액트 프로그래밍 강의