처음 만난 리덕스 (Redux) 문서
2.1 Redux 구성요소
먼저 Redux를 구성하는 요소들에 대해서 알아보도록 하겠습니다.
여기서 나오는 각각의 요소들에 대해서는 뒤에서 하나씩 더 자세히 다룰 예정입니다.
그 전에 먼저 전체적인 개념을 한 번 정리하고 넘어간다고 생각하면 좋을 것 같습니다.
2.1.1 Store
먼저 Store가 있습니다.
영어 단어 Store는 동사로 저장하다, 보관하다 라는 뜻을 갖고 있습니다.
Store와 비슷한 단어로 저장장치를 의미하는 Storage라는 단어가 있죠.
클라우드 컴퓨팅이나 서버쪽 경험이 있으신 분들은 Storage라는 단어를 많이 들어보셨을 겁니다.
Redux에서의 Store 또한 비슷한 의미를 갖고 있습니다.
Redux Store는 Redux의 데이터들을 저장하기 위한 저장소라고 보면 됩니다.
2.1.2 State
다음으로 나오는 Redux의 구성 요소는 State입니다.
보통 리액트에서 State라고 하면 리액트 컴포넌트의 State를 의미하고, 리액트 컴포넌트의 상태라는 뜻을 갖고 있습니다. 영어 단어 State가 상태라는 뜻이기 때문이죠.
Redux State가 가지는 의미도 동일합니다. Redux의 State는 앞에서 설명한 Redux Store에 저장되어 있는 데이터를 의미합니다.
데이터가 리액트 컴포넌트에 존재하는 것이 아니라, Redux Store에 존재하는 것이죠.
2.1.3 Action
다음 Redux의 구성 요소는 Action입니다.
영어 단어 Action은 행동, 동작이라는 뜻을 갖고 있습니다.
Redux의 Action도 어떤 행동을 의미합니다. 그 행동은 바로 Redux State에 변화를 주기위한 행동입니다.
앞에서 Redux State는 Redux Store에 저장되어 있는 데이터라고 말씀드렸죠.
그래서 다시 풀어서 써보면, Redux Action은 Redux Store에 저장된 데이터에 변화를 주기 위한 행동이라고 할 수 있습니다.
실제 Redux Action은 JavaScript 객체 형태로 존재하는데, 이 부분에 대해서는 뒤에서 자세히 배우도록 하겠습니다.
2.1.4 Action Creator
Action에 이어서 나오는 Redux의 다음 구성요소는 Action Creator입니다.
Action Creator는 단어의 의미 그대로 Action을 생성하는 생성자 역할을 합니다.
앞에 잠깐 말씀드린 것처럼 Action은 JavaScript 객체 형태로 존재하는데, Action Creator는 이 Action 객체를 생성하는 역할을 하는 JavaScript 함수입니다.
2.1.5 Reducer
Redux의 마지막 구성요소는 Reducer입니다.
앞에 나온 다른 단어들은 그래도 조금 익숙했을텐데, Reducer라는 단어는 조금 생소할 수 있습니다.
먼저 영어 단어 Reduce는 줄이다, 축소하다 라는 뜻을 갖고 있습니다.
그렇다면 Reduce 뒤에 r을 붙인 단어 Reducer는, 축소하는 역할을 하는 것이라고 해석해볼 수 있습니다.
직역하면 이런 의미를 가지지만, 실제 컴퓨터 프로그래밍 분야에서 Reduce라고 하면 입력에 어떤 처리를 해서, 원하는 결과로 축소시키는 과정이라는 의미를 갖고 있습니다. 그리고 Reducer는 이러한 역할을 실제로 수행하는 함수를 의미합니다.
그리고 Redux의 구성 요소로써의 Reducer는 Action이 발생하면, Action을 실제로 처리하는 역할을 하는 함수입니다.
앞에서 Action은 Redux State에 변화를 주기위한 행동이라고 했었죠.
그래서 결국 Reducer가 하는 역할은, Redux State에 변화를 주는 역할이라고 할 수 있습니다.
지금까지 Redux의 구성 요소들에 대해서 살펴보았습니다.
이제 앞 장에서 나왔던 그림을 다시 보면서, Redux의 구성요소와 작동방식을 다시 한 번 살펴보도록 하겠습니다.
이 그림에는 Store, State, Reducer가 존재하는 것을 볼 수 있습니다.
그리고 사용자가 버튼을 클릭하면 Redux Action이 발생을 하고, 이 Action을 Reducer가 처리하게 됩니다.
그리고 그 과정에서 State에 변화가 생기는 것이죠.
이러한 Redux의 작동 과정과 각 구성요소의 역할을 잘 기억하면서 다음으로 넘어가도록 하겠습니다.
마지막 업데이트: 2023년 07월 14일 00시 00분
이 문서의 저작권은 이인제(소플)에 있습니다. 무단 전재와 무단 복제를 금합니다.