Redux - 1. 수업소개

Redux - A predictable state container for JavaScript apps.

Redux는 JS로 만든 애플리케이션들을 위한 예측 가능한 상태의 저장소라고 자신을 소개한다.

 

예측 가능한

SW 개발 시 가장 큰 위험은 복잡성인데, 그 이유는 눈에 보이지 않기 때문이다. 이는 개발자가 슬럼프에 빠지는 원인이 되기도 하고 개발자와 경영자 사이를 멀어지게 이간질 하기도 한다.

 

또 엄청난 자본과 인력을 투입한 차세대 프로젝트들이 실패로 돌아가는 것도 바로 이 복잡성 때문이다.

 

따라서 우리는 더 복잡한 애플리케이션을 만들기 위해 코드의 복잡성을 낮추고 싶어진다. 

 

Redux는 애플리케이션의 복잡성을 획기적으로 낮춰서 우리의 코드가 어떤 결과를 가져올 지 예측 가능하게 만들어주는 도구이다.

 

그럼 이게 어떻게 가능한지 앞으로 살펴보자.

 

1. Single Source of Truth

가장 중요한 Redux의 특징으로 단 하나의 진실의 원천이라는 개념이 있다. 하나의 상태를 낳는다는 것이 Redux의 특징이다. 여기서 상태는 그냥 객체를 의미한다고 생각하면 된다.

즉, 하나의 객체 안에 애플리케이션에서 필요한 모든 데이터를 우겨 넣음으로 복잡성을 한 번 낮춘다.

 

한 곳에서 데이터를 중앙 집중적으로 관리하면 여러 곳에 흩어져 있는 것보다 훨씬 더 데이터를 관리하기 쉬워진다.

 

데이터는 너무 추상적으로 생각할 필요 없다. 예를 들어, contents를 다루고 id가 2인 글을 선택했다면 아래와 같은 상태가 될 것이다.

state = {
	contents: [
    	{id: 1, title: 'HTML', desc: 'HTML is ...'},
        {id: 2, title: 'CSS', desc: 'CSS is ...'}
    ],
    selected_id: 2
}

 

이렇게 단 하나의 state를 유지하는 것을 통해서 애플리케이션의 복잡성을 낮추는 것이 첫 번째 컨셉이다.

 

2. 기밀성, 무결성

중요한 데이터라 외부로부터 철저히 차단시켜 데이터 수정을 차단한다. 데이터를 읽고 쓰는 것은 인가된 담당자만을 통해서 할 수 있다. 여기서 담당자란 사람이 아닌 함수를 의미한다. 

 

예를 들어, 데이터를 쓰고 싶다면 직접 쓰지 못 하고 dispatcher라는 것을 통해서 또, reducer라는 걸 통해서만 데이터를 수정할 수 있다.

 

그럼 redux한테 글을 쓰고 싶다, 선택하고 싶다고 얘기한다면 redux가 그에 따라 꼼꼼하게 기록해서 최종적인 결과인 state를 변경시켜주는 역할을 하게 된다. 직접 state의 값을 바꾸지 못한다는 것이다.

 

데이터를 가져갈 때도 getState라는 것을 통해서만 데이터를 가져갈 수 있다. 

 

따라서 데이터를 외부에서 직접적으로 제어할 수 없도록 하는 걸 통해서 의도하지 않게 예기치 않게 state 값이 바뀌는 문제를 사전에 차단하는 걸 통해서 애플리케이션을 보다 예측 가능하게 만든다. 

 

그리고 state의 값이 바뀔 때마다 state에 데이터를 사용하는 애플리케이션의 여러 부분들에 데이터가 바뀌었음을 알려주고 각자 할 일을 하도록 알리는 도구가 있다. 그럼 각각의 애플리케이션들을 서로에 대해 신경 쓸 필요없이 그냥 자기 할 일만 하면 된다. 다른 부분에 신경 쓸 것 없이 딱 그 부분에만 신경쓰면 되기 때문에 애플리케이션을 만드는 과정에서 훨씬 더 적은 정신적 에너지를 소비하게 될 것이다. 

 

아직까지 이 개념은 추상적이지만 강의를 통해 코드로 학습하며 나중에 추상적인 개념까지 설명할 수 있을 정도가 되는 것이 이 학습의 목표이다.

 

3. Undo, Redo

redux의 특징은 undo와 redo를 쉽게 할 수 있다는 것이다.

왜냐하면 각각의 state 값들을 생성할 때 철저하게 통제하고 데이터를 만들 때 원본을 바꾸는 것이 아니라 원본을 복제하고 복제한 데이터를 수정해서 그것을 새로운 원본으로 만드는 방법을 채택하고 있다. 따라서 각각의 변화가 서로에게 영향을 전혀 주지 않는 독립된 형태를 유지할 수 있고 이런 특징을 잘 이용하면 undo, redo와 같이 애플리케이션의 상태를 바꾸는 것을 매우 쉽게 처리할 수 있다.

그리고 개발을 할 때 디버거를 통해서 애플리케이션을 현재 상태를 볼 수 있다. 그런데 redux는 현재 상태 뿐만 아니라 이전의 상태까지도 꼼꼼하게 기록한다. 이를 통해 과거의 어느 시점으로 돌아가서 그 시점에서 애플리케이션의 상태가 무엇인가를 찾아내는 걸 통해서 문제 해결을 훨씬 더 쉽게 할 수 있도록 도와준다.

 

4. Hot Module Reloading

우리가 코드를 작성하면 자동으로 작성한 코드가 애플리케이션에 반영된다. 그런데 단순히 그렇게 되는 게 아니라 더 진보된 기능을 보인다.

 

보통 이런 개발 환경은 데이터를 입력하고 난 뒤 수정되면 데이터가 사라지게 된다. 그럼 다시 입력해줘야 한다. 그런데 Hot Module Reloading이라는 것을 이용하면 애플리케이션은 새로 refresh가 되는데 데이터는 그대로 남아있기 때문에 다시 입력 작업을 할 필요가 없도록 우리의 개발 환경을 세팅할 수도 있다. 

 

그럼 후진이 없는 전진만 있는 개발을 할 수 있다.

 

---

참고자료

생활코딩 - Redux

https://opentutorials.org/course/4901

Redux - 생활코딩