리덕스

리덕스( Redux )

애플리케이션의 상태(state)를 관리하기 위한 자바스크립트 라이브러리

• 상태
  • 문자열, 배열, 객체 등의 형태로 저장된 데이터

리덕스 등장 배경

• MVC 패턴의 양방향 데이터 흐름은 설계하기 간단하고 코드 작성하기 쉬웠다.

• 하지만, UI/UX의 중요성과 함께 프로덕트 규모가 많이 커지고 프론트에드에서 관리해야할 상태가 많아진다. 그러면서 상태 관리가 더욱 중요해졌다.

  • 한 개의 뷰가 여러 개의 모델을 조작하면 데이터 흐름이 복잡해지면서 오류를 찾기 어려워진다.
  • 리액트에선 단방향 바인딩으로 Props Drilling 이슈도 존재한다. 최상위 컴포넌트에서 하위 컴포넌트까지 props를 전달할 때 props의 값이 바뀔 수도 있고 오류가 날 수도 있다.
  • 컴포넌트가 상태값을 교환할 때 주로 부모 컴포넌트가 중간자 역할을 하면서 부모 컴포넌트를 거쳐야 교환할 수 있었다.

리액트의 세 가지 원칙

1. 전체 상태값이 하나의 자바스크립트 객체로 표현됨

• 하나의 객체를 직렬화해서 서버와 클라이언트가 프로그램의 전체 상태값을 주고 받을 수 있다.

• 상태값을 버리지 않고 저장해 놓으면 실행 취소와 다시 실행 기능을 쉽게 구현할 수 있다.

2. 상태값은 읽기 전용

• 상태 업데이트 시 기존 객체를 건드리지 않고 새로운 객체를 생성해주어야 한다.

3. 오직 순수 함수에 의해서만 상태값 변경 가능

• 리듀서(순수함수) : 이전 상태값과 액션 객체를 입력으로 받아 새로운 상태값을 만드는 함수

(state, action) => nextState

• 리듀서 함수는 이전 상태와 액션 객체를 파라미터로 받고, 파라미터 외의 값에는 의존하면 안 된다.

• 똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과 값을 반환해야 한다.