본문 바로가기

DEVELOP/Javascript

Redux는 무엇이고, 어떤 장점이 있는가?

반응형

 첫 프로젝트 때는 클라이언트 사이드 구성에서 데이터 흐름에 대해 하위 컴포넌트들이 깊게 들어가지 않으니 상태 끌어올리기로도 충분히 작성이 가능할 것이라 생각하고 진행했었다. 하지만 막상 코드를 작성하다보니, 자식 컴포넌트에서 변경된 상태를 최상위 부모 컴포넌트로 다시 끌어올리거나 다시 데이터를 내려보내주는 과정을 2번 이상만 거쳐도 다루기가 굉장히 번거롭다는 것을 깨달았다. 그래서 파이널 프로젝트에서는 코스 과정에서 배웠던 Redux를 상태 관리 라이브러리로 선택하게 되었다. (Redux는 React에만 사용 가능한 것이 아니라  Angular 등 JS APP이라면 전부 사용할 수 있다.) 

 

  하지만 우리가 상태관리에 있어서 반드시 Redux를 사용해야 하는 것은 아니다. 우리가 Redux를 사용함에 따라서 어떤 시간적, 비용적 이점이 존재하는지 파악한 후 사용하는 것이 적절하다. 해당 되는 경우들의 예는 다음과 같다.

 

  • 상태가 선형이나 일방향으로 흐르지않아 트리가 복잡하거나, 여러 다른 방식으로 업데이트 되어야 할 때
  • 서로 관련이 없는 컴포넌트들이 같은 방식으로 상태를 업데이트 하는 경우
  • 사용자가 애플리케이션을 사용할 때 여러 상태 업데이트들과 연관이 되는 경우

 

다음은 Redux의 장점에 대해 이야기 하기 전에 개념에 대해서 간단하게 정리해 본 내용들이다.

 


Redux

 

JS APP을 위한 예측 가능하고, 중앙 집중식이며, 디버깅이 가능하고, 융통성 있는 상태 컨테이너

 

공식 페이지에서는 Redux에 대해 이렇게 설명하고 있는데, JS APP에서 상태를 더 효율적으로 관리하기 위해 사용하는 것이라 생각하면 된다.

 

Redux에는 다음과 같은 규칙들이 존재한다.

 

  1. Store는 무조건 하나만 존재한다.
  2. Redux의 state는 읽기 전용이다. (dispatch를 통해서만 state의 변경이 가능하다.)
  3. Reducer는 순수 함수로만 구성한다. (순수함수는 동일한 인자가 들어갈 때 항상 같은 값이 나와야 한다. 또한 함수에서 외부의 변수 값을 변경하거나 함수 내로 들어온 인자 값을 변화하게 만드는 일 역시 일어나서는 안된다.)

 

Redux의 Reducer에서 왜 순수함수를 써야하는지에 대한 자세한 내용은 다음 링크를 참고하면 좋을 듯 하다.

 

순수함수, Redux Reducer는 왜 순수함수여야 하는가?

Redux를 다룰때 주의해야 할 점은 Reducer는 반드시 순수함수여야 한다는 점 입니다. 하지만 순수함수가 정확히 무엇이고 왜 순수함수여야만 하는지를 잘 모르는 경우가 많습니다. 이번 포스팅에서

boxfoxs.tistory.com


리덕스에서 사용되는 키워드

Store

어플리케이션의 상태 값들을 집중적으로 관리한다. 상태 값들을 가지고 있으며 중앙에서 값들을 관리하는 개념으로 생각하면 된다. Reducer에서의 데이터 변화를 확인하고 상태 값을 변경한다.

Action

Redux를 움직이게 만드는 함수 같은 개념이라 생각하면 간단하다. 상태에 어떤 변화가 필요할 경우 참조하는 객체로, 우리는 스토어에 직접 접근할 수 없기 때문에 액션을 먼저 발행한 다음 스토어에서 이 액션을 접수했을 때 상태를 갱신하게 만들 수 있다. 액션은 어떤 형태로 실행될 지 명시해주는 type 속성을 반드시 가져야한다.

액션 생성함수는 액션을 만드는 함수로, 파라미터를 가져와 액션 객체 형태로 만들어준다. 액션을 사용하기 위해 반드시 액션 생성함수를 만들어야 하는 것은 아니지만, 나중에 컴포넌트에서 쉽게 액션을 발생시키기 위해서 작성해주는 것이다.

Reducer

상태에 변화를 일으키는 로직을 가진 함수로, 이전의 상태와 액션을 합쳐서 새로운 상태를 만든다. 따라서 리듀서는 상태, 액션이라는 두 파라미터를 받아오고, 새로운 상태를 만들어 반환한다.

  • 초기 상태는 리듀서의 디폴트 인수에서 정의한다.
  • 리듀서 함수는 순수함수여야하고, 결과 값을 출력할 때 파라미터의 에 의존해야 하고, 같은 결과를 출력해야한다.
  • 리듀서 함수에서 상태를 사용하면 반드시 상태의 초기화가 필요하다.
  • 상태가 변할 때 전해진 상태는 자체의 값으로 대체 되는 것이 아니고, 합성이 되는 것처럼 쓰여지며 반환된 상태는 스토어에 반영된다.
  • Object.Assign()을 사용하거나, sperad 문법을 사용해 새로운 객체를 리턴해주어야한다.

Dispatch

store의 내장함수 중 하나다. action을 발생시키는 것이 dispatch이며, dispatch라는 함수에 파라미터로 action을 전달한다. 호출이 되면 store에서 reducer 함수를 실행시키고, 해당 액션을 처리하는 로직이 있을 경우 액션을 참고하고 새로운 상태로 만들어준다.

Subscribe

스토어의 값이 필요한 컴포넌트는 스토어를 구독하는데, 이 작업은 react-redux의 connect 함수가 필요하다.


Redux Flow Diagram

redux flow diagram

 

  1. UI에서 컴포넌트 내에 존재하는 이벤트가 호출된다.
  2. 이벤트와 연결된 액션 생성자(함수)가 호출된다.
  3. 액션 생성자에서 생성된 액션이 호출된다.
  4. 액션이 리듀서로 전달된다. 이 과정을 디스패치에서 담당한다.
  5. 디스패치된 액션에 따라 기존의 상태값과 액션을 통해 다음 상태값으로 변화할 수 있도록 한다.
  6. 렌더링되어 UI에 나타난다.

Redux의 장점

 

 개념에 대해서 최대한 간단하게 정리해봤지만, 개인적으로 한 번에 바로 이해하기에는 러닝커브가 높은 편이라 생각한다. 하지만 Redux는 그것을 감안할 만큼 적용에 따른 장점이 매우 크다. 만약 퍼스트 프로젝트에 대해 언급했던 것처럼 Redux를 사용하지 않고 상태를 끌어 올리는 방식으로 진행했을 경우라면 상태의 흐름이 다음과 같을 것이다. 하위 컴포넌트에서 최상위 컴포넌트로 데이터가 끌어올려지고, 그 이후 다시 단계적으로 내려가며 데이터를 전송해야 한다.

 

 

 

하지만 Redux를 사용한다면 다음 그림과 같이 스토어를 구독한 하위 컴포넌트에서 바로 데이터를 스토어에 업데이트 한 뒤 컴포넌트에도 업데이트가 가능하다. 구체적으로 장점을 이야기해보면 다음과 같다.

 

  • 컴포넌트의 구조가 평평해졌고 데이터 전달을 위한 복잡한 계층 구조가 필요하지 않게 되었음.
  • 애플리케이션에서 액션과 리듀서 등을 각각 모아 분리함으로써 개발자들이 비즈니스 로직에 대해 파악하기에도 더 쉬워짐
  • props와 state를 이용해 상태에 대해 받아오지 않아도 되기 때문에, 클래스형 컴포넌트들을 함수형 컴포넌트로 변경할 수 있음
  • 상태 업데이트를 위한 함수들로 인해 컴포넌트가 필요 이상으로 커지는 것을 막을 수 있음

 

 



Reference

 

Redux Essentials, Part 1: Redux Overview and Concepts | Redux

The official Essentials tutorial for Redux: learn how to use Redux, the right way

redux.js.org

 

たぶんこれが一番分かりやすいと思います React + Redux のフロー図解 - Qiita

【追記】 もうこれ古いから参考にしないでください https://t.co/mXtcc73Orf— もし Laravel が流行しなくなってこられてきてたとしたら、絶対に捨てられてこられてたと思うか (@mpyw) January...

qiita.com

 

6장. 리덕스 · GitBook

이번 챕터에서 알아볼 주제는 리덕스(Redux) 입니다. 리덕스는 리액트 생태계에서 가장 사용률이 높은 상태관리 라이브러리입니다. 리덕스를 사용하면 여러분이 만들게 될 컴포넌트들의 상태 관

react.vlpt.us

 

[REDUX] Redux 개념, 구조, 실습

Redux란? - 리액트에서 상태를 더 효율적으로 관리하는 데 사용하는 상태 관리 라이브러리 - 리덕스는 쉽게 설명하면 상태 관리의 로직을 컴포넌트 밖에서 처리 하는 것이다. - 리덕스를 사용하면

hwan1001.tistory.com

 

Redux가 필요하다는 것을 언제 알 수 있나요?

이 글은 Simon Schwartz의 "When do I know I’m ready for Redux?"를 번역한 글입니다. 이 포스팅은 당신이 Redux 사용을 고려해

www.lunit.io

 

반응형