React(30) Redux 란

Redux 란

• 리덕스 는 React 의 상태관리 라이브러리이다. 즉, 데이터를 더욱 쉽게 이쪽저쪽으로 보내주고 관리도 해주는 도우미이다.
• React 는 View 만을 책임지는 라이브러리이기 때문에 데이터를 어떻게 관리할 것인가 고민을 하다가 redux 가 나왔다.
• 컴포넌트의 props와 state 만으로 상태를 관리하기엔 우리가 만드는 앱은 너무 복잡하기 때문이다.

 

Redux 의 동작 방식

변화가 일어나면 Action(type에 대한 정보를 가진 객체)을 만들고, → (각 액션에 맞게 미리 정의해 둔) Reducer가 새로운 상태를 만들어 → store를 업데이트 한다. store를 (connect()로) 구독하고 있는 → 컴포넌트(View)에 상태변화가 적용된다.

액션 생성자(action creators)

 

액션 생성자가 하는 일은 마치 전보기사(telegraph operator)와 같다. 

무슨 메시지를 보낼지 알려주면 액션 생성자는 나머지 시스템이 이해할 수 있는 포맷으로 바꿔준다. 

 

스토어(store)

 

스토어(store)는 모든 것을 관리하는 정부관료와 같다. 모든 상태 변화는 스토어에 의해서 이루어져야 하고 스토어로 직접 요청하는 대신 액션 파이프라인을 따라가야 한다. 

Redux의 스토어는 상태 트리(state tree) 전체를 유지하는 책임을 진다. 액션이 들어왔을 때 어떤 상태변화가 필요한지에 대한 일은 위임하며, 바로 다음에 이야기할 리듀서(reducer)가 그 일을 맡는다.  

 

리듀서(the reducers)

 

스토어는 액션이 어떤 상태 변화를 만드는지 알 필요가 있을 때 리듀서에게 묻는다. 루트 리듀서(root reducer)는 애플리케이션 상태 객체의 키(key)를 기준 삼아 상태를 조각조각 나눈다. 이렇게 나누어진 상태 조각은 그 조각을 처리할 줄 아는 리듀서에게 넘겨준다.

 

리듀서는 마치 서류 복사에 지나치게 열성적인 사무실 직원들과 같다. 일을 망치는 것에 아주 민감하므로 넘겨받은 예전 상태는 변경하지 않는다. 대신 새로운 복사본을 만든 후 거기에다가 모든 변경사항을 적용한다. 리듀서는 복사되고 업데이트된 상태 객체를 루트 리듀서에게 넘겨주고, 루트 리듀서는 이 객체를 스토어로 보낸다. 그리고 스토어는 이 객체를 새로운 애플리케이션 상태로 만든다.

 

Redux 의 세 가지 원칙

1. store는 오직 하나 만 존재한다.

즉, 전체 애플리케이션의 상태가 하나의 json object로 표현된다. json은 자바스크립트와 궁합이 잘 맞는데, 이로 인해 개발 시 편리한 점이 몇 가지 있다.

• Undo/Redo 기능을 쉽게 구현할 수 있다. 이전 상태의 json object를 현재 상태로 덮어쓰면 그만이다.
• 전체 상태를 저장하고 불러오기 쉽다. 마치 RPG 게임에서 저장하고 불러오기를 하듯이 하나의 json object를 어딘가에 저장하고 나중에 불러오면 그만이다.
• 디버깅이 쉬워진다. 예를 들어, 열 번의 버튼 클릭 시 간헐적으로 에러가 난다고 가정해보자. 에러를 발생시키고 관련 로그를 모으기 위해 수도 없이 많은 버튼 클릭이 필요하다. 하지만 아홉 번의 버튼 클릭 후의 상태를 저장해서 그 시점부터 한 번의 버튼 클릭을 하고 다시 그 시점으로 돌아가서 계속 반복하면 된다. 실제로 Dan Abramov는 Time Travel 기능을 위해 redux를 만들었다.

 

2. 오직 action을 통해서만 스토어의 상태를 변경할 수 있다.

action은 { type과 데이터 }를 담고 있는 json object다. 상태 변경의 경로가 단순해서 애플리케이션의 동작을 이해하기 쉽다.

 

3. reducer는 pure function이다.

reducer는 action과 이전 state를 입력으로 받아서 새로운 state를 리턴하는 함수이다. 같은 action과 state를 입력으로 주면 항상 같은 state를 리턴한다. pure function으로 만들기 위해서는 함수 내부에서 global 변수를 수정한다거나 랜덤 함수를 사용하면 안된다. 물론 시간 관련 함수를 사용해도 안 된다. 이로 인해 다음과 같은 장점이 있다.

• 발생한 action을 순서대로 기억하고 있으면 언제든지 현재 상태를 만들어 낼 수 있다. 덕분에 리플레이 기능을 쉽게 구현할 수 있다.
• 유닛테스트 코드를 작성하기가 쉽다. 정해진 입력에는 항상 예상되는 출력을 주므로 테스트 코드를 작성하는 게 즐거울 정도다.

 

다음의 경우에 해당되는 데이터는 redux로 관리하는 게 좋다.

• 애플리케이션의 여러 곳에서 공유되는 데이터
• 다른 페이지를 갔다가 돌아왔을 때 그 상태를 유지할 필요가 있는 데이터

 

 

 

자, 그럼 코드 예제를 통해 얘네가 어떻게 생겼는지 보러가보자 ↓

React(31) Redux 패턴 action-reducer-store-view

 

 

ref : bestalign.github.io/2015/10/26/cartoon-intro-to-redux/

ref : ljs0705.medium.com/redux%EB%A5%BC-%EC%9D%B4%ED%95%B4%ED%95%98%EC%9E%90-7c9e8de0ab7f