처음 만난 리덕스 (Redux) 문서
4.1 Action
먼저 Action에 대해서 알아보도록 하겠습니다.
영어 단어 Action은 행동, 동작이라는 뜻을 갖고 있습니다.
Redux의 Action도 어떤 행동을 의미합니다.
그 행동은 바로 Redux State에 변화를 주기위한 행동입니다.
Redux State는 Redux Store에 저장되어 있는 데이터라고 했습니다.
그래서 다시 풀어서 써보면, Redux Action은 Redux Store에 저장된 데이터에 변화를 주기 위한 행동이라고 할 수 있습니다.
그렇다면 Redux Action은 실제로 어떻게 생겼을까요?
실제 Redux Action은 JavaScript 객체 형태로 존재합니다.
다만, 일반적인 JavaScript 객체와 다른 점은 type이라는 필드를 무조건 포함한다는 점입니다.type은 Redux Action의 type을 의미합니다. type을 통해 어떤 Action인지를 나타내는 것이죠.
{
type: 'ADD_TODO',
text: 'Redux 공부하기'
}
여기 실제 Redux Action 객체를 한 번 볼까요?
우리가 흔히 볼 수 있는 일반적인 JavaScript 객체입니다.
그런데 여기서 type이라는 필드를 눈여겨 보기 바랍니다.
앞에서 말한 것처럼 type은 Redux Action의 type을 의미합니다.
쉽게 말해서 Action의 이름이라고 할 수 있습니다.
여기에서는 type에 ADD_TODO라는 문자열이 들어가 있는데, 이를 통해 이 Action은 TODO 리스트 앱에서 새로운 할 일을 추가하기 위한 Action이라는 것을 알 수 있습니다.
이처럼 Redux Action 객체에서는 type필드를 통해 자신이 어떤 Action인지를 나타내게 됩니다.
그리고 이 Action의 type들은 사전에 정해져 있는 것이 아니라, 모두 Redux를 사용해서 개발하는 개발자가 정의하게 됩니다.
그리고 Action 객체에 포함된 나머지 데이터들은 Action을 처리하는데 필요한 부가 데이터라고 보시면 됩니다.
보통 payload라고 부르는데 여기에서는 payload로 text라는 필드에 ‘Redux 공부하기’라는 문자열로 실제 TODO 리스트에 추가할 아이템의 이름을 넣었습니다.
여기에서는 Action 객체가 굉장히 단순하지만, 실제 규모가 큰 애플리케이션에서는 Action 객체가 수많은 데이터들을 포함하고 있는 경우가 많습니다.
그렇기 때문에 redux-devtools 같은 도구를 통해 Action 하나하나를 살펴보면서 디버깅 할 필요가 있는 것이죠.
자 그래서 정리해보면, Action은 애플리케이션에서 발생하는 일들을 설명하는 JavaScript 객체라고 할 수 있습니다.
마지막 업데이트: 2023년 07월 14일 00시 00분
이 문서의 저작권은 이인제(소플)에 있습니다. 무단 전재와 무단 복제를 금합니다.