118. Understanding Actions

npm create vue@latest


이번에는 상태 디자인에 대해 논의하며, 특히 액션을 사용하여 코드를 리팩토링하는방법에 초첨을 맞춥니다.
사용자 등록 및 인증 과정을 성공적으로 구현했지만, 현재 코드는 단일 컴포넌트에 한정되어 있습니다.
예를 들어, 어플리케이션 관리를 위한 관리자 인터페이스를 구축할 경우, 여러 위치에서 사용자를 등록할 필요가 있을 수 있으며, 이러한 경우 코드를 재사용 가능하게 만드는 것이 좋습니다.

Pinia에서는 액션(actions)이라는 해결책을 제공합니다.
액션은 스토어에서 비즈니스 로직을 처리하는 함수로, 스토어 내에서 함수를 정의하면 모든 컴포넌트에서 사용할 수 있습니다.
액션은 Vuex와는 다른 접근 방식을 가지며, 액션을 통해 상태 변화(mutations)를 수행할 수 있습니다.
액션의 장점은 모든 컴포넌트에서 사용할 수 있고, 비동기적일 수 있으며, 여러 변화를 한 번에 커밋할 수 있다는 것입니다.

액션을 정의할지, 아니면 컴포넌트 내부에서 메소드를 정의할지 결정하는 일반적인 규칙은 다음과 같습니다.
작성하는 코드가 상태에 영향을 미치면 액션으로 작성하고, 그렇지 않으면 컴포넌트의 메서드로 정의합니다.
따라서, 등록 양식에 대해 작성한 코드를 리팩토링하기 위해 액션을 사용할 예정입니다.