Redux의 주요 용어

이번 강의에서는 Redux를 더 깊이 있게 공부하는 데 필요한 주요 개념과 용어를 간략하게 살펴보겠습니다.

먼저 액션 (action)부터 시작하겠습니다. 이는 우리 애플리케이션에서 발생한 일을 설명하는 어떤 이벤트입니다. 기술적으로는 일반적인 JavaScript 객체로, 동작의 이름을 기입하는 type 필드를 포함합니다.

액션 객체의 두 번째 중요한 필드는 payload 필드입니다. 이 필드는 액션의 페이로드를 포함합니다. 페이로드란 액션에 매개변수로 전달되는 일부 데이터를 의미합니다.

또한 이 객체에는 추가 정보를 담은 다른 필드들도 있을 수 있습니다.

예를 들어, 액션을 하나 만들고 addOrderAction이라고 이름 붙여봅시다. 이것이 주문 추가를 담당한다고 가정하겠습니다. 그러면 type 속성에는 주문이 추가되었음(orderAdded)을 주문 목록(orders)에 표시할 것입니다. 그리고 payload에는 구체적으로 어떤 주문인지, 예를 들어 벽에 페인트 칠하기와 같은 내용을 적습니다:

const addOrderAction = {
	type: 'orders/orderAdded',
	payload: 'Paint a wall'
}

매번 액션 객체를 직접 작성하지 않기 위해, 소위 액션 생성자를 사용할 수 있습니다. 이는 액션 객체를 생성하여 반환해주는 함수입니다. 이를 addOrder라고 이름 짓겠습니다. 매개변수로는 payload 속성에 필요한 텍스트를 전달할 것입니다:

const addOrder = text => {
	return {
		type: 'orders/orderAdded',
		payload: text
	}
}

다음으로 중요한 개념은 리듀서 (reducer)입니다. 이는 현재 상태와 액션 객체를 인수로 받는 함수로, 상태를 어떻게 업데이트할지 결정하고, 필요한 경우 이미 업데이트된 상태를 반환합니다.

다음 개념은 스토어 (store)입니다. 이는 Redux 애플리케이션의 현재 전역 상태가 저장되는 객체입니다. 이 객체에는 현재 상태 값을 가져올 수 있는 getState 메서드가 있습니다.

스토어에는 dispatch 메서드도 있습니다. 이 메서드를 호출하고 액션 객체를 전달하는 것이 상태를 변경할 수 있는 유일한 방법입니다. 결과적으로 스토어는 리듀서 함수를 실행하고 자신에게 새로운 상태 값을 저장합니다.

이번 강의에서 살펴볼 마지막 개념은 셀렉터입니다. 셀렉터는 스토어에 있는 상태에서 정보를 추출하는 방법을 알고 있는 특별한 함수들입니다. 애플리케이션이 커짐에 따라 이러한 함수들은 특히 유용하며 코드 중복을 피하는 데 도움이 됩니다.

이러한 모든 개념과 실제 적용에 대한 자세한 내용은 이 튜토리얼의 다음 섹션에서 배우게 될 것입니다.