Redux

Redux 기초 개념 정리(2/4) - Action과 Action Creator

FrontOverflow 2023. 3. 12. 14:27
반응형

안녕하세요, 프론트엔드 개발 관련 지식을 공유하는 FrontOverflow입니다.

지난 글에 이어 이번 글에서는 Redux의 Action과 Action Creator에 대해서 알아보도록 하겠습니다.

먼저 Action이라는 영어 단어는 어떤 행동을 하는 것을 의미합니다.

Redux에서의 Action은 어떤 상태(state)의 변화를 주기 위한 행동을 의미합니다.

예를 들면, Redux를 사용해서 카운트 수를 저장하는 Counter 애플리케이션에서,

카운트 수를 올리거나 내리는 등의 행동을 Action이라고 볼 수 있겠죠.

 

그렇다면 실제 Redux Action은 어떻게 생겼을까요?

Action이라고 해서 거창한 무언가가 있는 것이 아니라,

그냥 단순한 JavaScript 객체입니다.

다만, type이라는 문자열(string)로 된 Action의 이름을 필수적으로 담고있는 객체를 의미합니다.

 

방금 말씀드린 것처럼, Action Type은 단순한 문자열(string)입니다.

위에서 말한 카운트 수를 변화시키는 Action Type은 아래와 같이 선언할 수 있을 것입니다.

const ACTION_COUNTER_UP = 'counter up';
const ACTION_COUNTER_DOWN = 'counter down';

 

그렇다면 Action Creator란 무엇일까요?

보통 컴퓨터공학에서 Creator라고 하면 생성자라는 뜻을 갖고 있습니다.

Redux에서 Action Creator는 말 그대로 Action을 생성하는 역할을 하는 함수입니다.

아까 Action은 단순한 JavaScript 객체라고 말씀드렸었죠?

다시 말하면, Action Creator는 Action에 대한 정보를 담고 있는 JavaScript 객체를 생성해주는 함수입니다.

 

아래 코드는 앞에서 선언했던 Action Type을 사용하여 카운트와 관련 된 Action Creator를 선언한 예시 코드입니다.

Redux를 사용해서 개발할 때는 이 Action Creator를 호출해서 Action을 생성하고 이를 Dispatch 합니다.

Dispatch는 일단은 Action을 실행한다 라고만 이해하시고, 더 자세한 개념은 나중에 설명하도록 하겠습니다.

const ACTION_COUNTER_UP = 'counter up';
const ACTION_COUNTER_DOWN = 'counter down';

function counterUp() {
    return {
        type: ACTION_COUNTER_UP,
    }
}

function counterDown() {
    return {
        type: ACTION_COUNTER_DOWN,
    }
}

다음 글에서 이어서 Redux의 기초 개념들을 살펴보도록 하겠습니다.

감사합니다.

반응형