리덕스(Redux)

• 리덕스(Redux)란 자바스트립트 상태 관리 라이브러리이다.
• 리덕스의 본질은 노드(Node.js) 모듈(Module)이다.

Redux의 원칙

• 리덕스(Redux의)는 세 가지 원칙을 가진다.

1. 단일 스토어(Single source of truth)

• 동일한 데이터는 항상 같은 곳에서 가지고 온다.
• 즉, 스토어(Store)라는 하나뿐인 데이터 공간이 있다는 의미이다.

2. 읽기 전용 상태(State is read-only)

• 리액트(React)에서는 setState 혹은 useState() 메서드(Method)를 활용해야만 상태(state) 변경이 가능하다.
• 리덕스에서도 action이라는 객체(Object)를 통해서만 상태(state)를 변경할 수 있다.
• 즉, 불변성 유지를 해주어야 한다.

3. 순수 함수만 변경 가능(Changes are made with pure functions)

• 변경은 순수 함수(Pure function)로만 가능하다.

  1. Reducer는 함수(Function)는 이전 상태(state)와 action 객체(Object)를 매개변수(parameter)로 받는다.
  2. 매개변수(parameter) 외의 값에는 의존하면 안된다.
  3. 이전 상태(prev)는 절대로 건드리지 않고, 변화를 준 새로운 상태(state) 객체(Object)를 만들어 반환한다.
  4. 똑같은 매개변수(parameter)로 호출된 Reducer 함수(Function)는 언제나 똑같은 결과 값을 반환한다.

• 따라서 Reducer 함수(Function) 내부에서 랜덤 값을 만들거나, Date 함수 사용 등을 선언하면 안된다.

• 일반 리듀서(Reducer)와 연관되는 개념이다.

• 스토어(Store) – action – Reducer 관계를 이룬다.



리덕스 개념 정리

액션(Action)

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

JavaScriptCopy

리듀서(Reducer)

• action을 스토어(Store)에 바로 전달하는 것이 아니다.

• action을 리듀서(Reducer)에 전달해야한다.

• 리듀서(Reducer)가 주문을 보고 스토어(Store)의 상태(state)를 업데이트하는 것이다.

• action을 Reducer에 전달하기 위해서는 dispatch() 메서드(Method)를 사용해야한다.

• action 객체(Object)가 dispatch() 메서드(Method)에 전달된다.

• dispatch(action)를 통해 Reducer를 호출한다.

• Reducer는 새로운 스토어(Store)를 생성한다.

스토어(Store)

• 스토어(Store)는 상태가 관리되는 오직 하나의 공간이다.
• 컴포넌트(Component)와는 별개로 스토어(Store)라는 공간이 있어서 그 스토어(Store) 안에 앱에서 필요한 상태(state)를 담는다.
• 컴포넌트(Component)에서 상태(state) 정보가 필요할 때 스토어(Store)에 접근한다.

디스패치(Dispatch)

• 디스패치는 스토어(Store)의 내장 함수 중 하나이다.
• 디스패치는 action을 발생시키는 것이다.
• dispatch()는 action 객체(Object)를 매개변수(parameter)로 넣어 호출한다.
• 이 함수가 호출되면 스토어(Store)는 Reducer 함수(Function)를 실행시켜서 새로운 상태(state)를 만들어 준다.

구독(subscribe)

• 구독도 스토어(Store)의 내장 함수 중 하나이다.
• subscribe 함수(Function) 안에 리스너 함수를 매개변수(parameter)로 넣어서 호출해주면 이 리스너 함수가 action이 dispatch()되어 상태(state)가 업데이트 될 때마다 호출된다.

JSXCopy

Redux의 상태 관리 도식화

• 이유는 데이터가 한 방향으로만 흘러야하기 때문이다.

Redux에서 위 개념을 구현하는 두 가지 방법

mapStateToProps

Redux hooks (비교적 최근에 나온 기술)

• useSelector
• useDispatch

Redux의 장점

• 상태(state)를 예측 가능하게 만든다. (순수함수를 사용하기 때문이다.)
• 유지보수에 용이하다.(복잡한 상태 관리와 비교할 수 있다.)
• 디버깅에 유리하다.(action과 state log 기록 시 redux dev tool(크롬 확장 이용한다.))
• 테스트를 붙이기 용이하다.(순수함수를 사용하기 때문이다.)

HTMLCopy