Redux(1)-소개 & 작동 방식

Anwooseong·2023년 7월 1일
0

리덕스는 어플리케이션에 있는 하나의 중앙 데이터(상태) 저장소이다.
그 저장소에는 인증 상태, 테마, 저장하려는 입력 상태 등 무엇이든지 저장한다.

  • 궁극적 목표
    - 저장소에 데이터를 저장해서 컴포넌트 안에서 그걸 사용할 수 있다.
    - 예를 들어 인증 상태가 변경되면 컴포넌트에서 그것을 인지해서 그에 맞춰 UI를 업데이트하길 원한다. 이 컴포넌트를 위해 저장소에 대한 Subscription을 설정한다. 컴포넌트가 저장소를 구독하고 데이터가 변경될 때마다 저장소가 컴포넌트에게 알려줘서 필요한 데이터를 받게 된다.

여기서 데이터는 어떻게 변경해야할까?
저장된 데이터를 직접 조작하지 않는다. 그래서 Subscription을 하는 것이도 데이터는 절대로 반대 방향(컴포넌트 -> 저장소)로 흐르지 않는다. 그 대신 리듀서라는 개념 사용한다. 이것이 저장소 데이터의 업데이트를 담당한다. 어떤 컴포넌트의 버튼을 누르면 데이터 변경을 트리거를 하게 될텐데 어떻게 그걸 연결해야하냐면 액션이라는 것이다. 액션은 리듀서가 수행해야할 작업을 설명하게 된다. 리덕스는 액션을 리듀서로 전달하고 원하는 작업에 대한 설명을 읽게 된다. 이어서 그 작업을 리듀서가 수행하게 된다. 그리고 나서 리듀서는 새로운 상태를 뱉어내고 그 실제로 중앙 데이터 저장소의 기존 상태를 대체하게 된다. 이러한 과정 이후 데이터 저장소의 상태가 업데이트되면 Subscription중인 컴토넌트가 알림을 받게 되고 컴포넌트는 UI를 업데이트할 수 있게 된다.

0개의 댓글