Redux - Introduce

doodream·2021년 12월 5일
1

Redux

목록 보기
1/4
post-thumbnail

Redux

Redux라는 것은 교차 컴포넌트 상태관리 혹은 앱 전체에 대한 글로벌 상태관리 라이브러리 입니다. 하지만 우리는 useState 그리고 useReducer와 같은 훅들로 state 관리를 해왔는데요.

정확하게redux를 이해하기 위해서 상태를 3가지 방식으로 나눌수 있습니다.

LocalState

로컬 상태 변수는 하나의 컴포넌트를 관리하는 상태변수 입니다. 예를 들면 input 태그의 value값을 관리하는 statetoggle 값을 관리하는 상태변수의 경우 다른 컴포넌트와 전혀 상관이 없기 때문에 우리는 보통 이것을 useState, useReducer로 관리합니다. 간단하니까요.

Cross-ComponentState

state 변수가 하나의 컴포넌트에만 영향을 끼치는 것이 아닌 다양한 컴포넌트에 영향을 끼칠때 이 상태변수는 Cross ComponentState라고 부릅니다.

예를 들면 모달창의 경우 부모 컴포넌트에서 open 값을 관리하고 Modal 창에 해당 open 상태변수를 props로 넘겨서 모달창의 외부 화면이나 취소 버튼을 누르면 open값을 바꿔야합니다. 이렇게 다양한 컴포넌트에 영향을 미치는데

이경우도 useState, useReducer를 통해서 props chaining을 구축해서 구현할 수 있습니다.

App-Wide State

state가 앱 전체에 대해 영향을 미칠때 입니다.
예를 들면 로그인 유저 데이터가 이경우라고 할수 있는데 유저가 로그아웃하면 앱전체에 접근가능한 페이지부터 접근 가능하지 않은 페이지, 사용할 수 있는 기능등 많은 것들이 변하게 됩니다. 이또한 useState 같은 훅으로 props chaining을 통해 구현이 가능합니다.

이러한 문제들을 context api를 이용하면 쉽게 해결할 수 있었습니다. redux도 같은 문제를 해결합니다.

하지만 의문이 듭니다. context가 있는데 redux를 쓰는 이유가 무엇일까요?

Context vs Redux

context 는 개념이자 기능입니다. 하지만 몇가지 잠재적인 단점을 가지고 있습니다. 이러한 단점이 아니라면 만들 어플리케이션은 충분히 Context를 사용해도 됩니다.

어려운 관리와 복잡한 설정

context는 상태관리를 주제별로 묶어서 관리하는게 좋습니다. 다만 큰 어플리케이션이라면 다양한 주제가 생겨나기 때문에 Context로 관리하는 주제가 많아지면서 복잡하게 구성해야합니다. 이렇게 JSX가 깊이 중첩되어버리게됩니다. 그렇다고 하나의 Context로 관리하기에는 하나의 Context가 불필요하게 커져버립니다.

성능

2018년도에 React 개발자가 적은 comment 입니다. context는 완벽한 상태관리 라이브러리가 아닐수 있으며 적은 횟수로 상태가 변하는 경우에 적합한 라이브러리입니다. 모든 Flux 상태 구조에 대해서 대체품이 될수가 없다고 했습니다.

이렇기 때문에 redux가 필요합니다.

Redux 핵심 개념

리덕스에서 관리되는 모든 상태 데이터들은 하나의 중앙 데이터 스토어에서 관리됩니다. 컴포넌트는 여기에서 일부의 스토어 조각을 구독해서 데이터를 가져옵니다. 컴포넌트가 중앙 스토어에서 상태변수값을 가져오는 것을 subscribe 구독이라고 합니다.

그러면 store는 어떻게 데이터를 관리하게 될까요? 데이터에 대한 가공은 Reducer가 합니다. 이 reducer는 하나의 개념으로서 하나의 데이터를 넣으면 여러개의 데이터와 같이 가공된 데이터가 반환되는 것으로 useReducer, javascript의 reducer, Redux의 Reducer 역시 같은 개념을 사용합니다.

그렇다면 컴포넌트는 리덕스 상태변수에게 어떻게 영향을 미치게 할수 있을까요? 컴포넌트에서 상태변수의 조작은 Action 이라는 객체를 통해 이루어집니다. Action은 일반적인 자바스크립트 객체로서 컴포넌트가 Dispatch 라는 개념으로 Action에 특정한 작업 이름을 전달하면 Action은 해당작업에 맞는 설명을 Reducer에 전달합니다. 즉 Dispatch 라는 것은 컴포넌트가 특정 작업을 유발시키는 작업이고 Dispatch는 특정작업에 대한 설명을 모아놓은 Action 객체를 거쳐 해당 작업에 대한 설명을 Reducer로 전달합니다.

위와 같은 구조의 일방향적인 데이터 흐름을 Flux 아키텍쳐라고 합니다.

profile
일상을 기록하는 삶을 사는 개발자 ✒️ #front_end 💻

0개의 댓글