Redux가 무엇

Redux가 무엇일까?

리덕스는 크로스 컴포넌트 또는 앱 와이드 상태를 위한 상태 관리 시스템

애플리케이션을 변경하고 데이터(크로스컴포넌트 상태, 앱와이드 상태)를 관리하도록 도와줌

1. 로컬상태
2. 크로스 컴포넌트 상태
3. 앱 와이드 상태

 

 

1. 로컬상태

데이터가 변경되어서 하나의 컴포넌트에 속하는 UI에 영향을 미치는 상태

• 예) 사용자 입력을 청취 -> useState를 사용 -> 입력을 state 변수에 저장함 -> 토글버튼 같은것

2. 크로스 컴포넌트 상태

하나의 컴포넌트가 아닌 다수의 컴포넌트에 영향을 미치는 상태

• 예) 모달창을 닫기위한 트리거가 모달창 안밖에 달려있는 것 -> prop체인을 구축해야함(prop 드릴링)

3. 앱 와이드 상태

모든 컴포넌트에 영향을 미치는 상태

• 예) 사용자 인증 -> 로그인시 탐색바를 변경, 많은/적은 옵션표시

 

 

 

그렇다면 리액트 컨텍스트를 쓰면되지 않을까?

 

• 다중컴포넌트에 리액트 컨텍스트 사용한 혼합과 매칭도 가능
• 리액트 컨텍스트의 잠재적인 단점
  1. 설정이 아주 복잡해질 수 있다(상태관리 어려움) -> 모든다양한 컴포넌트들을 관리하기 위해서 큰 컨텍스트 하나와 ContextProvider 컴포넌트 하나만 사용할 수 있기 때문에
  2. 성능
     테마를 변경하거나 인증 같은 저빈도 업데이트에는 좋지만 데이터가 자주 바뀌는 경우에는 좋지 않음, 유동적인 상태확산을 대체할 수 없음

 

리덕스 작동 방식

• 리덕스는 하나의 중앙 데이터 저장소임 -> 전체 에플리케이션의 모든 상태(인증상태, 테마, 입력상태 등)를 저장함

컴포넌트가 저장소에 대한 구독을 설정함 -> 데이터가 변경될때마다 저장소가 컴포넌트에 알려줌 -> 컴포넌트는 필요한 데이터(현제의 인증상태, 리덕스 저장소의 일부)를 받게됨

• 때때로 저장된 데이터도 변경된다

컴포넌트는 자체적으로 저장된 데이터를 건들지 않는다. -> 리듀서 함수(변형을 담당)를 사용

• 리듀서 함수(useReducer 훅과는 다름)

리듀서 함수는 일반적인 개념, 저장소 데이터의 업데이트를 담당
입력을 받음 -> 입력을 변환하고 줄이는 함수임
입력을 변환해서 새로운 출력, 새로운 결과를 뱉어냄

예) 숫자로 된 리스트를 그 숫자들의 합으로 줄일수 있음

 

 

 

컴포넌트와 리듀서 함수를 어떻게 연결할까?

• 연결과정 및 작동방식

컴포넌트 버튼 클릭 -> 데이터 변경을 트리거(액션(자바스크립트 객체-> 리듀서가 수행해야할작업 설명) -> 컴포넌트 액션발송) -> 리덕스는 그 액션을 리듀서로 전달(원하는 작업에 대한 설명을 읽게됨) -> 리듀서는 새로운 상태를 뱉어냄-> 기존 중앙데이터 저장소의 기존상태를 대체 -> 구독중인 컴포넌트가 알림을 받음 -> 컴포넌트는 UI를 업데이트함

트리거 (trigger)

다른 회로에 적당한 계기를 부여하여 필요한 작동을 일으키는 일.