FE

"Redux 입문: 상태 관리 데이터 흐름"

올바른생활부터 2024. 3. 26. 01:25
728x90
반응형
SMALL

최근 "리액트를 다루는 기술" 책을 보다가 리액트의 상태관리의 중요성을 알게되어 상태 관리 도구인 Redux에 대해 알아보고자 정리해보았다.

목차

1. Redux란?

2. redux의 필요성 & 사용하는 이유

3. 리덕스의 등장 배경

4. redux 용어

5. Redux 애플리케이션 데이터 흐름

6. 리덕스의 장점

7. 결론

1. Redux란?

  • Redux는 전역 상태관리를 위한 도구이다. 어플리케이션 전체에 대한 중앙 저장소 역할을 한다.

2. redux의 필요성 & 사용하는 이유

상태(state)란?

  • React에서 State는 component 안에서 관리되는 것이다.
  • 자식 컴포넌트들 간의 다이렉트 데이터 전달은 불가능 하다.
  • 자식 컴포넌트들 간의 데이터를 주고 받을 때는 상태를 관리하는 부모 컴포넌트를 통해서 주고 받는다.
  • 그런데 자식이 많아진다면 상태 관리가 매우 복잡해진다. 상태를 관리하는 상위 컴포넌트에서 계속 내려 받아야한다. ⇒Props drilling 이슈

리덕스를 쓰면, 상태 관리를 컴포넌트 바깥에서 한다

  • 리덕스를 사용하면 상태값을, 컴포넌트에 종속시키지 않고, 상태 관리를 컴포넌트의 바깥에서 관리 할 수 있게 된다.

redux를 사용하는 이유

  • Redux가 없는 코드는 각각의 component(부품) 간의 의존성이 너무 높다.
    예를 들어, 다른 component의 코드를 수정하거나 삭제하면(Red 삭제), 다른 component와(Blue, Green) 연결된 코드가 얽혀있어 오류가 발생한다. 그러므로 component 추가, 수정, 삭제 시, 기존의 component를 모두 수정해야한다.
  • 하지만, Redux를 통해 중앙 집중형 관리를 하면, 각각의 component는 action(상태가 바뀌었다는 것)을 store에 dispatch(통보, 전달)하면 된다.
    이에 따른 자신의 변화를 작성 후 store에 subscribe(구독)하면, state가 바뀔 때마다 통보를 받기 때문에 다른 component와의 연결 없이 자신의 모양을 자유롭게 바꿀 수 있다. 즉, 수정해도 다른 부품들은 영향을 받지 않게되는 것이다. 요약하자면, Redux를 통해 각 Module의 독립성을 보장받을 수 있다.

3. 리덕스의 등장 배경

리덕스가 등장하기 이전 프론트엔드에서 데이터 흐름(형상)을 관리하는 방식은 MVC 패턴이었다.

  • Model: 데이터의 형식이나 구조를 관리한다. 모델에 맞지 않는 데이터는 흐름를 제어 받을 수 있다.
  • View: 코드가 사용자에게 보여지는 부분을 담당한다.
  • Controller: 변화하는 데이터를 관리한다. View에서 발생하는 이벤트로 변경되는 데이터나 서버로부터 받은 변경된 데이터를 Model과 View에 업데이트 해준다.

  • MVC 패턴은 ‘양방향 데이터 흐름’이다. 모델이 변경된다면 뷰 또한 변경되고, 사용자에 의해 뷰에서 변경이 일어난다면 모델 또한 변경된다. 이러한 양방향 데이터 흐름은 설계하기 간단하고 코드 작성하기 쉬운 장점이 있다.
  • 하지만 애플케이션 규모가 커진다면 문제가 생긴다. 한 개의 모델이 여러 개의 뷰를 조작하고 한 개의 뷰가 여러 개의 모델을 조작한다면 데이터 흐름을 이해하기 힘들어진다. 버그를 찾기 어려워지고 데이터 흐름을 추적하는 데 많은 시간을 투자해야 한다는 문제가 있다.

  • MVC 패턴으로 데이터 흐름을 관리하는 데 많은 어려움을 겪고 있었고 그의 대안으로 Flux라는 새로운 아키텍처 패턴을 개발하였다.

  • Flux패턴은 MVC 패턴에서 겪은 복잡한 문제를 단방향 데이터 흐름을 적용한 것이다. View는 MVC 패턴과 달리 데이터를 변경시키지 않고 Action을 넘겨준다. Action은 반드시 Dispatcher를 지나게 되고, Dispatcher를 통해서 데이터 변경이 일어나고 View는 변경된 데이터를 Store를 통해서 전달 받는다.
  • 이러한 단방향 데이터 흐름은 예측 가능하다는 특징을 갖는다.
  • 2015년에는 Dan Abramov에 의해서 React + Flux의 구조에 ‘Reducer’를 결합한 ‘Redux’가 등장하게 된다.

4. redux 용어

액션(Action) :애플리케이션에서 스토어에 운반할 데이터를 말한다. (주문서)

  • 액션는 하나의 객체로 표현되며, 액션 객체는 다음과 같은 형식으로 이루어져있다.
{
  type: "TOGGLE_VALUE"
// 액션 객체는 type을 필수적으로 가지고 있어야하고, 그 외의 값들은 개발자 마음대로 넣어줄 수 있다.
}

{
  type: "ADD_TODO",
  data: {
    id: 0,
    text: "리덕스 배우기"
  }
}

 

스토어(Store) : 애플리케이션의 상태를 보유한다.

  • 컴포넌트와는 별개로 스토어라는 공간이 있어서 그 스토어 안에 앱에서 필요한 상태를 담는다.
  • 컴포넌트에서 상태 정보가 필요할 때 스토어에 접근한다.

리듀서(Reducer) : 상태를 변화를 일으키는 함수이다.

  • Action(액션)을 Store(스토어)에 바로 전달하는 것이 아니다.
  • Action(액션)을 Reducer(리듀서)에 전달해야한다.
  • Reducer(리듀서)가 주문을 보고 Store(스토어)의 상태를 업데이트하는 것이다.
  • Action(액션)을 Reducer(리듀서)에 전달하기 위해서는 dispatch() 메소드를 사용해야한다.

즉, 1. Action(액션) 객체가 dispatch() 메소드에 전달된다. 2. dispatch(액션)를 통해 Reducer를 호출한다. 3. Reducer는 새로운 Store 를 생성한다의 순서로 동작하다고 이해 하면 된다.

 

디스패치(dispatch) : 디스패치(dispatch)는 스토어의 내장 함수 중 하나 이다. 액션을 스토어에 전달하는 것을 의미한다.

 

구독 : 스토어(store)의 내장 함수 중 하나이다. 스토어 값이 필요한 컴포넌트는 스토어를 구독한다.

  • subscribe 함수 안에 리스너 함수를 파라미터로 넣어서 호출해주면, 이 리스너 함수가 액션이 디스패치 되어 상태가 업데이트될 때마다 호출된다.

5. Redux 애플리케이션 데이터 흐름

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

6. 리덕스의 장점

데이터가 집중화(Centralized) 되어 있어서 예측 가능하며(Predictable)데이터 흐름이 단방향이라서 디버깅하기 쉽다(Debuggable). 또 리덕스와 연관된 좋은 생태계가 구축되어 있어서 필요에 맞게 유연하게(Flexible) 구현할 수 있다.

또한, React로 Flux패턴의 특징인 단방향 데이터 흐름을 구현할 경우 ‘과도한 prop drilling(prop 전달이 매우 많은 경우)’가 생기거나 디버깅이 어려움이 생겨 상태 관리 도구를 사용한다.

 

 

7. 결론

  • redux는 전역 상태를 관리하고 예측 가능하게 해주는 라이브러리이다

왜?

1. context API와 redux의 차이는 무엇일까요?

context API

: context API는 상태를 주입하는 API이다.

  • 사용 용도: props drilling 문제를 해결할 수 도구이다. Context API는 주로 "상대적으로 단순하거나 애플리케이션의 특정 부분에 관련된 상태 관리"를 하는 데 사용된다.
  • 성능 이슈: Context API는 상태가 업데이트 될 때 모든 하위 컴포넌트들이 리렌더링 되기 때문에 사용량이 많아지면 성능 이슈가 발생할 수 있다.

redux

: 리덕스는 중앙 집중식인 상태 관리와 예측 가능한 상태 업데이트를 제공한다. 또한, 미들웨어를 통해서 비동기 작업을 효과적으로 처리할 수 있다.

  • 사용 용도:
    - props drilling 문제를 해결할 수 도구이다.
    - Redux는 애플리케이션 상태의 전반적인 복잡성을 관리하는 데 유리하다. 특히 상태가 복잡하거나 여러 컴포넌트에서 공유되어야 하는 경우에 유용하다.

참고

728x90
반응형
LIST