리듀서 ( Reducer ), 리덕스 ( Redux )

hyeonyohwan·2021년 4월 6일

리듀서 ( Reducer ) 란?

이전 상태와 동작을 받아 새 상태를 리턴하는 순수 함수이다.
순수 함수란 동일한 인자가 들어오면 항상 같은 값이 나와야하고 return 값으로만 소통하고 데이터베이스 호출이나 HTTP 호출 등 외부의 데이터 구조를 변형하는 호출을 허용하지 않는 함수이다.
리듀서는 할 일을 정의하는 Action, 애플리케이션의 모든 데이터를 저장하는 State, Action과 State를 받아 새 상태를 리턴하는 Reducer를 포함한다.

Single source of truth - redux는 한 곳에서 데이터를 전역적으로 관리하며 이 곳을 Store 라고 부른다.
State is read-only - 기존의 상태를 건드리지 않고 새로운 state를 생성하여 업데이트해줘야 한다. 불변성 유지를 하면서 상태변경을 해야한다.
Changes are made with Pure Functions - 순수함수로 작성되어야 한다.

리덕스에서는 상태를 store에 보관하는데 store는 리듀서를 실행하여 새 상태를 유지할 책임을 진다.

store는 createStore 라는 함수를 통해 생성할 수 있으며 애플리케이션 내부에서 유일성을 가진다.

type - 필수값으로 액션 구분

payload - 액션에 따라 데이터로 사용되는 값, 객체를 자료형으로 사용하는 것이 일반적

error- 오류를 표현하고 싶은 경우 true로 지정, 이러한 경우 payload에도 Error 객체를 넣어야 한다.

meta - payload 외의 정보를 액션에 포함시키고 싶은 경우 사용

createStore(reducer, [preloadedState], [enhancer]) - store 생성 시 사용되며 4개의 메소드를 가지고 있다.( dispatch, subscribe, getState, replaceReducer )

dispatch - 액션을 발생시킨다.

getState - store의 현재 상태를 확인할 수 있다.

subscribe - store의 상태가 변경될 때 호출할 콜백함수를 지정할 수 있다.(subscribe 함수에 특정 함수를 전달해주면 액션이 dispatch 되었을 때마다 전달해준 함수가 호출된다)

replaceReducer - 애플리케이션의 규모가 커져서 리듀서를 분할하였을 경우 스토어에 연결된 리듀서를 이후 다른 리듀서로 변경해야할 때 사용한다.

event.target - 자신이 클릭한 자식 요소를 반환한다.

event.currentTarget - 이벤트가 부착된 부모의 위치를 반환한다.

<li>
	<button onClick={onLogin}>
		<span>Penguin</span>
	</button>
</li>

두 친구의 console.log를 찍어보면

const onLogin = (event) => {
	console.log(event.target);
	console.log(event.currentTarget);
}

event.target 은 span을, event.currentTarget 은 button을 반환한다.

웹 프론트엔드 개발자입니다.