React, Redux, Redux-saga에 대하여

---

ReactJS란?

Facebook 에서 만든 Javascript 라이브러리(!=프레임워크)

DOM 관리와 상태값 업데이트 관리를 최소화하고, 개발자가 오직 기능 개발과 UI 구현에 집중할 수 있도록 하기 위해 만들어진 라이브러리(예. Angular, Vue, Backbone, React..)

 

특징

전체 앱은 Component들이 결합해서 만들어진다.

각 Component들은 앱의 다른 부분, 또는 다른 앱에서 재사용이 가능하다.

JSX를 사용한다.

Virtual DOM을 이용한다.

단방향 데이터 바인딩.

 

DOM이란?

Document Object Model. 문서 객체 모델.

HTML, XML 문서를 처리하는 API.

 

Virtual DOM이란?

(브라우저 작동 원리 참고)

일반적으로 DOM에 변화가 생기면, 렌더트리를 재생성하고 레이아웃을 만들고 페인팅을 하는 과정이 반복된다.

복잡한 SPA에서는 DOM 조작이 많이 발생해서, 그 변화를 적용하기 위해서는 브라우저가 많은 연산을 해야하기 때문에 전체적인 프로세스가 비효율적이다.

Virtual DOM은 DOM에 변화가 발생했을 때, 실제 DOM에 적용되지 전에 가상의 DOM에 그 변화를 적용시키고, 변경 전의 DOM과 가상의 DOM을 비교해서 변경된 부분만 업데이트한다.

 

예) 30개의 노드를 하나 하나 수정하면, 30번의 레이아웃 재계산과 30번의 리렌더링이 수행된다. 하지만 Virtual DOM을 이용하면 30번의 변화를 묶어서 Virtual DOM에 적용한 뒤, 최종적인 변화를 한 번에 실제 DOM에 전달한다.

Virtual DOM 없이도 처리할 수 있지만, 그러려면 개발자가 직접 값의 변화를 하나씩 비교해야하는데, Virtual DOM은 이를 자동으로 처리해준다.

---

 

전 회사에서 React로 웹 페이지를 개발했었다. 프로젝트 초기에는 괜찮았는데, 서비스에 신규 기능이 계속해서 늘어나면서 state와 props 관리가 힘들어졌다. 그래서 사용하게된 것이 바로 Redux이다.

 

 

Redux란?

- 상태(state) 관리를 컴포넌트 바깥에서 할 수 있도록 해주는 라이브러리이다.

- Redux는 React에 종속되는 라이브러리가 아니다.

- HTML과 Javascript 환경에서도 사용이 가능하다.

 

Redux 규칙

- 하나의 애플리케이션 안에는 하나의 스토어가 존재한다.

- 상태는 읽기 전용이다.(불변성을 유지하기 위해)

- 변화를 일으키는 함수인 Reducer는 순수한 함수여야 한다. 즉, 액션 객체를 파라미터로 받아서 이전의 상태는 절대 건들이지 않고, 변화를 일으킨 새로운 상태 객체를 만들어 반환한다. 

 

Redux를 사용하는 이유?

가장 최하단에 있는 컴포넌트에서 가장 최상단에 있는 root 컴포넌트의 상태 값을 바꾸기 위해서는 여러 상위 컴포넌트를 거쳐야 하는데, 이는 매우 복잡하고 만약 변수 명이 바뀐 경우에는 하위 컴포넌트들의 값을 모두 수정해야 한다.

이러한 점을 개선하기 위해 상태 관리를 컴포넌트 바깥에서 할 수 있는 Redux를 사용한다.

 

Redux Work Flow

Redux Work Flow

(1) Trigger Action

상태(State)값에 어떤 변화를 줘야할 때, 우리는 Action이라는 것을 발생시킨다고 한다.

따라서 컴포넌트에서 상태 값에 변화를 줄 때, Action을 발생(Trigger)시킨다.

 

(2) Dispatch action

Reducer는 변화를 일으키는 함수로, 현재의 상태와 컴포넌트로부터 전달받은 Action을 참고해서 새로운 상태(State)를 만들어서 반환한다.

 

(3) Update state

Reducer는 Store로 부터 받은 기존의 state 값을 새로운 state 값으로 업데이트한다.

 

(4) Subscribe

변화된 state 값을 props로 받는 컴포넌트가 다시 만들어지면서 컴포넌트의 state 값이 업데이트된다.

 

 

 

 

 

 

 

Redux를 사용해 상태 값을 컴포넌트 바깥에서 관리하니 훨씬 편리했다.

Redux가 적용된 공통 템플릿을 만들고, 새로운 컴포넌트를 만들 때마다 사용하니까 상태 값 관리가 정말 정말 편리했다. 

그런데 이번에는 자주 사용하는 함수가 신경쓰이기 시작했다. 같은 내용의 함수가 여러 컴포넌트에 존재하다보니 코드 중복 문제도 있었고, 함수 내용을 수정해야할 때마다 함수 명을 전체 찾기해서 하나씩 수정해줘야했다.

이를 위해 사용하게된 것은 Redux-saga 이다.

 

 

 

 

 

 

Redux-saga란?

Redux-saga는 사이드 이펙트(Side effect)를 관리하기 위해 만들어졌다. 애플리케이션에서 필요한 사이드 이펙트를 별도의 스레드로 분리해서 관리하는 것이다.

여기서 사이드 이펙트는 브라우저 캐시에 접근하거나 Ajax 호출과 같은 데이터 요청처럼 외부에서 영향을 주거나 받는 것을 의미한다.

 

redux-saga is a library that aims to make application side effects (i.e. asynchronous things like data fetching and impure things like accessing the browser cache) easier to manage, more efficient to execute, easy to test, and better at handling failures.

 

Redux-saga WorkFlow

클릭해서 보면 work flow의 흐름을 알 수 있다.

 

 

다음에는 실제로 업무에 Redux, Redux-saga를 적용한 예를 정리해보려고 한다.

 

 

 

 

 

 

 

 

 

 

 

 

참고 사이트

 

https://github.com/redux-saga/redux-saga/blob/master/README.md

redux-saga/redux-saga

https://redux-saga.js.org/docs/introduction/BeginnerTutorial.html

1.1 Beginner Tutorial · Redux-Saga

https://meetup.toast.com/posts/136

Redux-Saga: 사이드 이펙트 관리 : TOAST Meetup